React useState更新对象时，必须使用扩展运算符吗？不用会怎样？

在 React 中，使用 useState hook 更新对象状态时，经常会看到这样的代码：

const [state, setState] = useState({ name: '张三', age: 30 });

const updateName = () => {
  setState({ ...state, name: '李四' });
};

你可能会疑惑，为什么要用扩展运算符 ...state 呢？直接修改 state.name 然后 setState(state) 不行吗？答案是：不行！这样做会导致各种各样的问题，理解背后的原因对于写出健壮的 React 应用至关重要。

为什么要使用扩展运算符？

React 的 useState hook 的核心理念是不可变性（Immutability）。这意味着你不应该直接修改 state 对象本身，而是应该创建一个新的对象，然后使用 setState 更新 state。扩展运算符 ... 恰好可以帮助我们创建一个新的对象，并将原对象的所有属性复制到新对象中，然后再修改新对象的属性。

如果不使用扩展运算符，直接修改 state 对象，React 将无法检测到 state 的变化，从而导致组件不会重新渲染。

原理剖析：React 的浅比较

React 使用浅比较来判断 state 是否发生了变化。浅比较只比较两个对象的引用是否相同，如果引用相同，则认为对象没有发生变化。当你直接修改 state 对象时，state 的引用并没有改变，因此 React 认为 state 没有发生变化，组件就不会重新渲染。而使用扩展运算符创建了一个新的对象，state 的引用发生了改变，React 就能检测到 state 的变化，从而触发组件的重新渲染。

不使用扩展运算符会发生什么？

组件不会重新渲染： 这是最直接也是最常见的问题。当你修改了 state 对象，但是组件没有重新渲染，你会发现 UI 没有任何变化，这会让你感到非常困惑。
状态不一致： 在复杂的组件中，state 的更新可能会依赖于之前的 state 值。如果你直接修改 state 对象，可能会导致 state 的值与你期望的不一致，从而导致各种 bug。
性能问题： 虽然直接修改 state 对象可能看起来更高效，但实际上它可能会导致性能问题。因为 React 无法准确地知道哪些组件需要重新渲染，所以可能会导致不必要的重新渲染。

举例说明：一个简单的计数器

假设我们有一个简单的计数器组件：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState({ value: 0 });

  const increment = () => {
    // 错误的做法：直接修改 state
    // count.value = count.value + 1;
    // setCount(count);

    // 正确的做法：使用扩展运算符
    setCount({ ...count, value: count.value + 1 });
  };

  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

如果使用错误的做法，你会发现点击 “Increment” 按钮后，计数器的值并没有发生变化。这是因为 React 没有检测到 count 对象的变化，所以组件没有重新渲染。

更深入的理解：函数式更新

除了使用扩展运算符，还可以使用函数式更新来更新 state。函数式更新是指将 setState 的参数设置为一个函数，这个函数接收之前的 state 值作为参数，并返回一个新的 state 值。

const increment = () => {
  setCount(prevState => ({ ...prevState, value: prevState.value + 1 }));
};

函数式更新的优点是可以避免闭包问题，并且可以确保 state 的更新是基于最新的 state 值。

总结：

在 React 中，使用 useState hook 更新对象状态时，必须使用扩展运算符或函数式更新，以确保 state 的不可变性。
直接修改 state 对象会导致组件不会重新渲染、状态不一致和性能问题。
理解 React 的浅比较原理是理解为什么需要使用扩展运算符的关键。

希望这篇文章能够帮助你更好地理解 React 中 useState hook 的使用，避免一些常见的错误。记住，保持 state 的不可变性是写出健壮 React 应用的关键！避免直接修改state，拥抱扩展运算符，你的React代码将会更加稳定和可维护。

React useState更新对象时，必须使用扩展运算符吗？不用会怎样？

为什么要使用扩展运算符？

不使用扩展运算符会发生什么？

点评评价