setState和useState使用区别

`useState` 和 `setState` 是React中用于管理组件状态的重要工具，它们的主要区别在于：

1. **副作用**[^1]:
- `setState` 是异步的，意味着它不会立即更新组件的状态，而是添加到渲染队列中，等待下一个事件循环后再进行更新。这可能导致短暂的UI不一致（通常由React优化器优化掉）。
- `useState` 提供的是同步更新，当你调用 `set` 方法时，状态直接改变，然后触发组件的重新渲染。

2. **返回值**:
- `useState` 返回一个新的状态和对应的setter函数。setter函数用于更新状态，而状态本身则是不可变的。
- `setState` 没有返回值，但你可以传递一个回调函数，在状态更新完成后再执行某些操作。

3. **数组和对象处理**[^2]:
- 对于简单的值（如数字），两者处理相似。但如果涉及到数组或对象，`useState` 更灵活。由于`useState` 的更新是原子性的，对数组或对象的修改会创建新的引用，避免潜在的性能问题。而`setState` 则可能不会按预期工作，因为它可能会合并新的对象属性。

举例来说，假设有一个简单的计数器组件：

const [count, setCount] = useState(0);
function handleClick() {
  // 使用useState
  setCount(count + 1); // 直接更新 count，保证同步
}

// 而 setState 示例可能更复杂，因为它是异步的：
// function handleClickWithSetState() {
//   this.setState(prevState => ({ count: prevState.count + 1 }));
// }

在更新数组时，推荐使用 `useState` 以保持清晰的逻辑和避免意外行为。