Hooks使用useReducer

鬼月残雪

于 2025-04-07 10:38:48 发布

阅读量475

点赞数 10

文章标签：前端 javascript 开发语言 react.js

本文链接：https://blog.youkuaiyun.com/Jsjdjbxjjwjd/article/details/147036657

版权

useReducer 是 React 中用于管理复杂状态逻辑的 Hook，尤其适合处理包含多个子值、依赖前一个状态或需要统一管理的场景。

基础用法

要使用 useReducer，你需要从 React 库中导入它，并在组件的顶层调用它。useReducer 接受三个参数：reducer 函数、初始状态和一个可选的初始化函数。它返回一个包含当前状态和 dispatch 函数的数组。

const [state, dispatch] = useReducer(reducer, initialArg, init?)

useReducer接收三个参数：

reducer 函数：指定如何更新状态的还原函数，它必须是纯函数，以 state 和 dispatch 为参数，并返回下一个状态。

初始状态：初始状态的计算值。

（可选的）初始化参数：用于返回初始状态。如果未指定，初始状态将设置为 initialArg；如果有指定，初始状态将被设置为调用init(initialArg)的结果。

useReducer返回两个参数：

当前的状态：当前状态。在第一次渲染时，它会被设置为init(initialArg)或 initialArg（如果没有 init 的情况下）。

dispatch：调度函数，用于调用 reducer 函数，以更新状态并触发重新渲染。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

//确保 reducer 是纯函数，不直接修改 state，始终返回新对象。
function reducer(state, action) {
//使用 TypeScript 或约定好的字符串常量定义 action.type，避免拼写错误。
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </>
  );
}

异步使用

在 useEffect 中 Dispatch：将异步逻辑放在 useEffect 或事件处理函数中，完成后触发 dispatch。

const fetchData = async () => {
  dispatch({ type: 'FETCH_START' });
  try {
    const data = await api.get();
    dispatch({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_ERROR', payload: error });
  }
};

与 Context API 结合

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};
//子组件中获取reducer值
function Child() {
  const { state, dispatch } = useContext(AppContext);
    return (
      <>
     <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
     <span>{state.count}</span>
     <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
     </> 
    );
}

初始状态延迟初始化

const initState = (initialCount) => ({ count: initialCount });
const [state, dispatch] = useReducer(reducer, initialCount, initState);

useReducer还有第三个参数init，那么它的作用是什么？它也是为了性能优化而来。

有一个场景，计数器的值保存在localStorage里面，进入页面的时候，我们希望从localStorage中读取值来作为useReducer初值，如果没有init，我们可以这样做：

function getInit() {
  const savedCount = localStorage.getItem("count");
  return savedCount ? Number(savedCount) : 0;
}

function counterReducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, getInit());

  // 使用useEffect来监听状态的变化，并将其保存到localStorage
  useEffect(() => {
    localStorage.setItem("count", state.count);
  }, [state.count]);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button>
    </>
  );
}

我们直接调用getInit函数作为useReducer的第二个参数，从而得到初始状态。当React初始化这个组件时，它会执行这个函数并使用其返回值作为初始状态。

如果在第三个参数里进行初始化，代码是这样写：

function init(initialValue) {
  // 尝试从localStorage中读取值
  const savedCount = localStorage.getItem("count");
  // 如果有值并且可以被解析为数字，则返回它，否则返回initialValue
  return { count: savedCount ? Number(savedCount) : initialValue };
}

function counterReducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, 0, init);
  // 使用useEffect来监听状态的变化，并将其保存到localStorage
  useEffect(() => {
    localStorage.setItem("count", state.count);
  }, [state.count]);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button>
    </>
  );
}

最终功能一样的，但它们区别很大：

1. 执行时机

直接调用函数作为第二个参数：这个函数会在每次组件渲染时执行。使用init函数：init函数只在组件初次渲染时执行一次。

2.访问到的数据：

直接调用函数作为第二个参数：这个函数只能访问到定义它时的作用域内的数据。使用init函数：由于init函数接受initialArg作为参数，这使得init函数具有更大的灵活性，能够基于传入的参数进行计算。

3.性能：

直接调用函数作为第二个参数：这个函数执行了复杂计算操作，那么在每次组件渲染时都会执行，可能会导致性能问题。使用init函数：由于它只在组件的初始化阶段执行一次，所以对于那些计算复杂的初始化操作，使用init函数可能会更为高效。