组件local state为何会受global state变更影响？

核心原因 #

你把Local和Global组件定义在了MyApp组件内部，每次MyApp因为global状态更新触发重新渲染时，这两个组件函数都会被重新创建。

React判断两个组件是否为同一个实例，依赖的是组件的引用地址。当Local函数被重新定义后，它的引用和之前的旧组件完全不同，React会将其视为全新组件处理：

• 先卸载之前已挂载的旧Local组件实例，该实例的local状态会被一并销毁
• 然后挂载新的Local组件实例，新实例执行useState(0)，local状态自然回到初始值0

修复方案 #

把Local和Global组件移到MyApp组件外部，这样它们的引用地址在MyApp重新渲染时不会改变，React就会保留原组件实例和对应的local状态。

修正后的代码：

// 将组件移到父组件外部
function Local() {
  const [local, setLocal] = useState(0)
  return (
    <button onClick={() => setLocal(1)} >
      {local}
    </button>
  )
}

function Global({ global, setGlobal }) {
  return (
    <button onClick={() => setGlobal(1)}>
      {global}
    </button>
  )
}

export default function MyApp() {
  const [global, setGlobal] = useState(0)

  return (
    <>
      <Local /> <Global global={global} setGlobal={setGlobal} />
    </>
  );
}

这样点击Global按钮更新全局状态时，Local组件的实例不会被销毁，local状态也就不会重置了。

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