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 (
<GlobalsContext.Provider value={value}>{children}</GlobalsContext.Provider>
);
};2. 在根组件中包裹 Provider
// main.jsx 或 App.jsx
import { GlobalsProvider } from './GlobalsProvider';
function App() {
return (
<GlobalsProvider>
<YourRoutesOrComponents />
</GlobalsProvider>
);
}3. 在任意组件中消费全局状态
import { useContext } from 'react';
import { GlobalsContext } from './GlobalsProvider';
export default function MyComponent() {
const { number, updateNumber } = useContext(GlobalsContext);
const handleClick = () => updateNumber(5);
return (
<div>
<p>当前数字：{number}</p>
<button onClick={handleClick}>设为 5</button>
</div>
);
}⚠️ 注意事项与最佳实践
- 不要滥用全局状态：仅将真正需要跨组件共享或需长期保留的数据放入全局状态；UI 局部状态（如表单输入、折叠展开）仍应优先使用 useState。
- 持久化需显式实现：useContext + useReducer 默认不保存到 localStorage，示例中已通过 useEffect 补充，确保刷新/重打开后状态可恢复。
- 避免直接修改 state：始终通过 dispatch 触发 reducer 更新，保障状态不可变性与可预测性。
- 性能提示：useContext 在 Provider 值变化时会触发所有消费者重渲染；如状态字段较多，可考虑拆分 Context 或使用 useMemo 包裹 value。
通过这一模式，你不仅解决了“关闭再打开重置”的问题，还构建了可扩展、可测试、符合 React 最佳实践的状态管理基础。
