跳至主要內容

useReducer

njr大约 1 分钟约 374 字

useState 可以满足大部分状态管理的需求,有时你希望将状态逻辑与进行状态更改的组件分开。此外,如果你有多个状态元素通常会一起改变,那么有一个包含所有状态元素的对象可能很有帮助。这时使用 useReducer 是一个更好的选择。

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...
}

useReducer 接收一个 reducer 函数和一个初始状态,返回一个包含当前状态和 dispatch 函数的数组。

  • reducer:指定数据如何更新,reducer 函数必须为纯函数,接收当前状态和 action 作为参数,并返回下一个状态。状态和 action 可以是任何类型。
    • state:当前状态
    • action:触发状态改变的 action
  • initialArg:初始状态的值,可以是任何类型。初始状态的计算取决于下一个 init 参数。
  • optional init:初始化函数,返回初始状态。如果未指定,则初始状态设置为 initialArg。否则,初始状态设置为 init(initialArg) 的结果。
import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });

  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

useReducer 类似 useState,但他可以将逻辑与组件分离,并且可以处理多个状态元素。