当前位置：首页 > React

react中的状态如何使用

2026-03-11 11:58:45React

使用 useState 钩子管理状态

在 React 中，状态可以通过 useState 钩子进行管理。useState 是一个函数，它返回一个状态值和一个更新该状态的函数。调用 useState 时，可以传入初始状态值。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

使用 useReducer 管理复杂状态

对于更复杂的状态逻辑，可以使用 useReducer 钩子。useReducer 接受一个 reducer 函数和初始状态，返回当前状态和一个 dispatch 函数。

react中的状态如何使用

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>当前计数: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>增加</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>减少</button>
    </div>
  );
}

状态提升

当多个组件需要共享状态时，可以将状态提升到它们的最近共同父组件中。父组件通过 props 将状态传递给子组件，子组件通过回调函数更新父组件的状态。

react中的状态如何使用

function ParentComponent() {
  const [sharedState, setSharedState] = useState('初始值');

  return (
    <div>
      <ChildComponent state={sharedState} onStateChange={setSharedState} />
    </div>
  );
}

function ChildComponent({ state, onStateChange }) {
  return (
    <input
      value={state}
      onChange={(e) => onStateChange(e.target.value)}
    />
  );
}

使用 Context API 共享状态

对于全局状态或深层嵌套组件间的状态共享，可以使用 Context API。创建一个 Context 对象并通过 Provider 提供状态值，子组件通过 useContext 钩子访问状态。

import React, { createContext, useContext, useState } from 'react';

const StateContext = createContext();

function App() {
  const [state, setState] = useState('初始值');

  return (
    <StateContext.Provider value={{ state, setState }}>
      <ChildComponent />
    </StateContext.Provider>
  );
}

function ChildComponent() {
  const { state, setState } = useContext(StateContext);

  return (
    <input
      value={state}
      onChange={(e) => setState(e.target.value)}
    />
  );
}

状态持久化

如果需要将状态持久化到本地存储（如 localStorage），可以在 useEffect 钩子中监听状态变化并保存到本地存储，同时在初始化时从本地存储读取状态。

import React, { useState, useEffect } from 'react';

function PersistentCounter() {
  const [count, setCount] = useState(() => {
    const savedCount = localStorage.getItem('count');
    return savedCount !== null ? parseInt(savedCount, 10) : 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}