useReducer

useReducer Hook 类似于 useState Hook

它允许自定义状态逻辑

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

语法

useReducer Hook 接受两个参数

useReducer(<reducer>, <initialState>)

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

useReducer Hook 返回当前 state 和一个 dispatch 方法

这是计数器应用程序中 useReducer 的示例:

实时编辑器

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) => ( <div key={todo.id}> <label> <input type="checkbox" checked={todo.complete} onChange={() => handleComplete(todo)} /> {todo.title} </label> </div> ))} </> ) } render(<Todos />)

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) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  )
}

render(<Todos />)

结果

Loading...

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

添加、删除和完成待办事项的所有逻辑都可以通过添加更多操作包含在单个 useReducer Hook 中