React组件重新渲染后状态为何重置？如何解决？

关于状态重置的疑问 #

组件的重新渲染（比如由状态更新、props变化触发的渲染）不会自动重置useState的状态，状态会保持当前的更新后的值。你遇到的情况是组件卸载后重新挂载——此时组件会创建全新的实例，useState会重新使用你传入的初始值（此处为6），因此看起来像是状态被“重置”了。

解决方法 #

下面是几种常用的方案：

• 持久化到浏览器存储
  把状态同步到localStorage或sessionStorage，组件挂载时从存储读取初始值，更新状态时同步写入存储。示例代码：

  const [number, setNumber] = useState(() => {
    // 优先从localStorage读取，不存在则用默认值6
    const stored = localStorage.getItem('number');
    return stored ? Number(stored) : 6;
  });
  
  function handleClick() {
    const newVal = 5;
    setNumber(newVal);
    localStorage.setItem('number', newVal);
  }
  

  注意：sessionStorage仅在当前会话有效，关闭标签页会清空；localStorage会持久保存，除非手动清除。

• 状态提升到父组件
  如果该组件是通过父组件的条件渲染控制显示/隐藏（而非完全卸载），可以把number状态移到父组件中，通过props传递给子组件。只要父组件不卸载，状态就会保留。示例：
  父组件：

  function Parent() {
    const [number, setNumber] = useState(6);
    const [showChild, setShowChild] = useState(true);
  
    return (
      <>
        <button onClick={() => setShowChild(!showChild)}>切换组件显示</button>
        {showChild && <Child number={number} setNumber={setNumber} />}
      </>
    );
  }
  

  子组件：

  function Child({ number, setNumber }) {
    function handleClick() {
      setNumber(5);
    }
    return <button onClick={handleClick}>更新数字</button>;
  }
  

• 使用全局状态管理工具
  借助Redux、Zustand、Jotai等全局状态库，将状态存储在全局容器中。无论组件是否卸载，只要应用还在运行，就能获取到最新的状态值。

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