面试题：为什么 React 不推荐直接修改 state？如果需要修改 state，应该如何操作？

在 React 中，直接修改 state（即 this.state）是被严格禁止的。React 不推荐这样做的原因以及正确的修改方式如下：

为什么不能直接修改 state？

绕过 React 的状态管理机制：
React 的 state 不仅仅是一个普通的数据对象。当你调用 setState() 时，React 会执行一系列关键操作：
- 触发重新渲染 (Re-render)：setState() 会通知 React 组件的状态已改变，需要重新调用 render() 方法来更新 UI。
- 批量更新 (Batching)：React 会将多个 setState 调用合并为一次更新，以提高性能。
- 状态合并 (State Merging)：对于类组件，setState() 会智能地将你提供的新状态与现有状态进行浅合并。
如果你直接修改 this.state（例如 this.state.count = 5），这些关键步骤完全被跳过。React 不知道状态已经改变，因此不会触发重新渲染，导致 UI 无法更新，出现“数据变了但界面没变”的 bug。
破坏不可变性原则 (Immutability)：
现代前端框架（包括 React）推崇数据的不可变性。直接修改 state 是一种“突变”(mutation) 操作，这会：
- 难以追踪状态变化，增加调试难度。
- 可能导致意外的副作用，尤其是在使用 PureComponent 或 React.memo 进行性能优化时，它们依赖浅比较来判断是否需要更新。如果 state 被直接修改，引用没有改变，优化机制会认为状态未变，从而阻止必要的更新。
可能导致竞态条件和逻辑错误：
setState() 是异步的。如果你直接修改 state，然后紧接着又调用 setState()，可能会因为异步更新的时机问题，导致最终状态不一致或逻辑错误。

如何正确地修改 state？

必须使用 React 提供的专用方法来修改 state：

1. 对于类组件 (Class Components)

使用 this.setState() 方法。

接收一个对象：提供要更新的状态片段，React 会将其与现有状态进行浅合并。
接收一个函数（推荐用于依赖前一个状态的情况）：当新状态依赖于前一个状态时，应传入一个函数。该函数接收 (prevState, props) 作为参数，并返回一个包含更改的对象。使用函数形式可以避免因 setState 异步特性导致的状态更新不准确的问题。

2. 对于函数组件 (Function Components)

使用 useState Hook 返回的 setter 函数。

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  const increment = () => {
    // ✅ 正确：使用 setter 函数
    setCount(count + 1); // 基于当前值

    // 或者，如果新状态依赖于旧状态，推荐使用函数形式
    setCount(prevCount => prevCount + 1);

    setName('Alice');
  };

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

setCount 和 setName 就是 useState 提供的 setter 函数，它们的作用等同于类组件中的 setState()。
同样，当新状态依赖于前一个状态时，向 setter 传递一个函数是更安全的做法。

总结

操作	是否允许	后果
`this.state.count = 5;` (类组件)	❌ 禁止	UI 不更新，破坏 React 内部机制
`this.setState({ count: 5 });` (类组件)	✅ 正确	触发更新，安全可靠
`setCount(5);` (函数组件)	✅ 正确	触发更新，安全可靠

核心原则：永远不要直接写入 this.state。始终使用 setState()（类组件）或 useState 的 setter 函数（函数组件）来更新状态。这样做能确保 React 能够检测到状态变化，正确地更新 UI，并维护应用的稳定性和可预测性。

THE END

React 基础面试题