React父子组件渲染疑问：子组件state未随父组件props更新

问题核心 #

你第一个子组件里的const [count, setCount] = useState(props.data)，只有在组件第一次挂载的时候会把props.data作为count的初始值。之后哪怕父组件更新导致props.data变了，子组件虽然会跟着重新渲染，但useState不会自动用新的props值去覆盖已经存在的state——这是React的设计规则：组件内部的state是独立的，除非你主动调用setCount去修改，否则它不会随props变化而更新。

为什么直接渲染props就正常？ #

第二个子组件直接返回<div>{props.data}</div>，每次子组件重新渲染时，都会直接读取父组件传过来的最新props.data值，自然能实时反映父组件的更新结果。

如果需要同步state和props的解决方案 #

要是你确实需要让子组件的state跟着props同步更新，可以用useEffect监听props.data的变化：

const RerenderCheck = (props) => {
  const [count, setCount] = useState(props.data);
  
  // 当props.data变化时，更新子组件的count状态
  useEffect(() => {
    setCount(props.data);
  }, [props.data]);
  
  return <div>{count}</div>;
};

这样每次props.data改变，useEffect的回调就会触发，调用setCount把最新的props值同步到子组件的state里。

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