useReducer

阅读2223

更新时间2025-08-20

useRef

useCallback

useReducer Hook 类似于 useState Hook。

它允许自定义状态逻辑。

如果您发现自己跟踪依赖于复杂逻辑的多个状态，useReducer 可能会很有用。

语法

useReducer Hook 接受两个参数。

useReducer(, )

reducer 函数包含您的自定义状态逻辑，initialState可以是一个简单的值，但通常会包含一个对象。

useReducer Hook 返回当前的状态和一个 调度方法。

这是一个计数器应用中的 useReducer 示例:

实例:

import { useReducer } from "react";
import ReactDOM from "react-dom/client";

const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        
          
             handleComplete(todo)}
            />
            {todo.title}
          
        
      ))}
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

这只是跟踪待办事项完成状态的逻辑。

添加、删除和完成 todo 的所有逻辑都可以包含在单个 useReducer Hook 中，方法是添加更多操作。

useRef

useCallback

RELATED VIDEOS