React组件中如何根据传入Props即时更新本地State？

首先明确：绝对不能直接在useState代码行之后执行setState，这种写法会导致组件重复渲染，甚至触发无限循环，完全不符合React的渲染逻辑。

正确的实现方式是使用useEffect钩子，监听目标props的变化，在props更新时同步本地state：

const MyComponent = ({ prop1, prop2 }) => {
  // 用传入的prop1初始化本地state
  const [state, setState] = useState(prop1);

  // 监听prop1的变化，变化时更新state
  useEffect(() => {
    setState(prop1);
  }, [prop1]); // 依赖数组：仅当prop1改变时执行回调

  // 组件其余逻辑...
};

关键说明： #

• 依赖数组是核心：把需要监听的props（比如上面的prop1）放进useEffect的第二个参数数组里，React会自动对比props的前后值，只有当它发生变化时才执行回调里的setState，避免不必要的更新。
• 初始值设置：useState(prop1)已经处理了组件首次渲染时的state初始化，不需要额外在渲染阶段手动调用setState。
• 不需要特定事件：React的useEffect就是专门用来处理这类“响应外部变化更新内部状态”的副作用场景，不需要依赖任何DOM事件或自定义事件。

内容的提问来源于stack exchange，提问作者Blankman