在 React 中，为什么不能直接修改 state 而必须使用 setState 或 useState 的更新函数？

在 React 中，为什么不能直接修改 state 而必须使用 setState 或 useState 的更新函数？

回答与解析：
React 的状态（state）是不可变的（immutable），这意味着你不应该直接对 state 变量赋值（例如 this.state.count = 5 或 const [list, setList] = useState([]); list.push(newItem)）。直接修改 state 不会触发组件的重新渲染，因为 React 无法检测到状态的变化。

React 依赖状态的引用变化来决定是否需要重新渲染组件。当你使用 setState（类组件）或 useState 的 setter 函数（函数组件）时，React 会：

1. 将新的状态值与当前状态进行比较（对于对象或数组，是浅比较）；
2. 如果发现变化，就会安排一次重新渲染；
3. 同时，这些更新函数是批处理的，有助于性能优化。

此外，在函数式组件中使用 useState 时，若新状态依赖于前一个状态，应传递一个更新函数（如 setCount(prev => prev + 1)），以确保获取到最新的状态值，避免闭包导致的 stale state 问题。

示例（错误 vs 正确）：

// ❌ 错误：直接修改数组
const [items, setItems] = useState([]);
items.push("new item"); // 不会触发重渲染

// ✅ 正确：使用 setter 创建新数组
setItems(prev => [...prev, "new item"]);

因此，遵循不可变性原则并使用 React 提供的状态更新机制，是保证 UI 与状态同步的关键。