当前位置：首页 > React

react如何维护状态

2026-02-12 07:27:22React

React 状态维护方法

React 提供了多种状态维护方式，适用于不同场景和需求。以下是常见的方法：

使用 useState Hook
适用于函数组件中的局部状态管理。通过 useState 声明状态变量和更新函数，状态变化触发组件重新渲染。
示例代码：

const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);

使用 useReducer Hook
适合复杂状态逻辑或状态依赖前一个状态的情况。通过 reducer 函数集中管理状态变更。
示例代码：

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    default: return state;
  }
};
const [state, dispatch] = useReducer(reducer, { count: 0 });

使用 Context API
解决跨组件层级的状态共享问题。通过 createContext 创建上下文，配合 Provider 传递状态。
示例代码：

const ThemeContext = createContext();
const App = () => (
  <ThemeContext.Provider value="dark">
    <ChildComponent />
  </ThemeContext.Provider>
);

使用状态管理库（如 Redux、MobX）
适用于全局状态或大型应用。Redux 通过单一 store 和纯函数 reducer 管理状态；MobX 采用响应式编程模型。
Redux 示例代码：

const store = createStore(reducer);
store.dispatch({ type: 'INCREMENT' });

使用自定义 Hook
封装可复用的状态逻辑。自定义 Hook 可以组合内置 Hook 实现特定功能。
示例代码：

react如何维护状态

const useCounter = (initialValue) => {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  return { count, increment };
};