React 中的状态持久化：为什么组件重渲染后状态会重置？_技术教程

react 的 `usestate` 是局部状态，组件卸载后状态即丢失；若需跨组件或重打开时保留数据，应使用 context + usereducer 实现全局状态管理，而非依赖本地 state。

在 React 开发中，一个常见误解是认为 useState 的值具有“记忆性”或“持久性”。实际上，每次组件挂载（mount）时，useState(initialValue) 都会以 initialValue 为基准初始化一次状态。因此，当你的组件被关闭（卸载）再重新打开（重新挂载）时，const [number, setNumber] = useState(6) 会再次执行，number 被重置为 6 —— 这正是你观察到的行为，并非状态在每次重渲染时被自动更新，而是组件重建导致状态被重新初始化。

✅ 正确理解：useState 不等于“持久存储”

const [number, setNumber] = useState(6); // ⚠️ 仅在首次渲染/组件挂载时生效

useState(6) 中的 6 是初始值（initial value），不是默认值（default value）；
它不会从上一次挂载“恢复”，也不会自动读取 localStorage 或其他外部源；
所有状态变更（如 setNumber(5)）仅在当前组件实例生命周期内有效。

✅ 解决方案：用 Context + useReducer 构建可共享、可持久化的全局状态

虽然 useContext + useReducer 本身不自带持久化能力，但它为状态统一管理和后续扩展（如结合 localStorage 持久化）提供了理想架构。以下是精简可靠的实现步骤：

1. 创建全局状态上下文（GlobalsProvider.jsx）

import { createContext, useReducer, useEffect } from 'react';

const GlobalsContext = createContext();

const globalsInitialState = {
  number: 6,
};

const actions = {
  UPDATE_NUMBER: 'UPDATE_NUMBER',
};

export const globalsReducer = (state, action) => {
  switch (action.type) {
    case actions.UPDATE_NUMBER:
      return { ...state, number: action.newNumber };
    default:
      return state;
  }
};

export const GlobalsProvider = ({ children }) => {
  const [state, dispatch] = useReducer(globalsReducer, globalsInitialState);

  // ✅ 可选：添加 localStorage 持久化（增强实用性）
  useEffect(() => {
    const saved = localStorage.getItem('appState');
    if (saved) {
      try {
        const parsed = JSON.parse(saved);
        if (typeof parsed.number === 'number') {
          dispatch({ type: actions.UPDATE_NUMBER, newNumber: parsed.number });
        }
      } catch (e) {
        console.warn('Failed to load state from localStorage', e);
      }
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('appState', JSON.stringify(state));
  }, [state]);

  const value = {
    number: state.number,
    updateNumber: (newNumber) => dispatch({ type: actions.UPDATE_NUMBER, newNumber }),
  };

  return (
    {children}
  );
};

2. 在根组件中包裹 Provider

// main.jsx 或 App.jsx
import { GlobalsProvider } from './GlobalsProvider';

function App() {
  return (
    
      
    
  );
}

3. 在任意组件中消费全局状态

import { useContext } from 'react';
import { GlobalsContext } from './GlobalsProvider';

export default function MyComponent() {
  const { number, updateNumber } = useContext(GlobalsContext);

  const handleClick = () => updateNumber(5);

  return (
    
      当前数字：{number}
      
    
  );
}

⚠️ 注意事项与最佳实践

不要滥用全局状态：仅将真正需要跨组件共享或需长期保留的数据放入全局状态；UI 局部状态（如表单输入、折叠展开）仍应优先使用 useState。
持久化需显式实现：useContext + useReducer 默认不保存到 localStorage，示例中已通过 useEffect 补充，确保刷新/重打开后状态可恢复。
避免直接修改 state：始终通过 dispatch 触发 reducer 更新，保障状态不可变性与可预测性。
性能提示：useContext 在 Provider 值变化时会触发所有消费者重渲染；如状态字段较多，可考虑拆分 Context 或使用 useMemo 包裹 value。

通过这一模式，你不仅解决了“关闭再打开重置”的问题，还构建了可扩展、可测试、符合 React 最佳实践的状态管理基础。