译文：如何使用useReducer Hook？

2023-10-02 13:07:50

在所有的新React Hooks中，useReducer或许仅仅是因为名字，就可能成为使用最多的一个。这个单词会让很多人联想起Redux——但读本文，你不必事先理解Redux。我们这里要谈的“reducer”，实际问题是，如何利用useReducer的优点来管理组件中的复杂状态（而不是全局状态）。

1. useReducer简介

useReducer Hook接受一个reducer函数和一个初始值，然后返回一个状态和一个派发函数。每次派发一个动作时，reducer函数都会被调用，它将根据动作和当前状态返回一个新的状态。

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

reducer：一个纯函数，它接受当前状态和一个动作，然后返回一个新的状态。
initialState：组件的初始状态。
state：组件的当前状态。
dispatch：一个函数，它接受一个动作作为参数，然后触发reducer函数来更新状态。

2. useReducer与useState的区别

useReducer和useState都是React中用于管理状态的Hooks。然而，它们之间有一些关键区别：

reducer函数： useState只接受一个值作为参数，而useReducer接受一个reducer函数和一个值作为参数。这使得useReducer能够对状态进行更复杂的更新。
可预测性： 使用useReducer，您可以确切地知道每次对状态进行更新时会发生什么。这使得调试和测试变得更加容易。
性能： useReducer通常比useState的性能更好，特别是在处理复杂状态时。

3. 何时使用useReducer？

您应该在以下情况下使用useReducer：

当组件的状态很复杂，并且需要进行复杂的更新时。
当组件需要共享状态时。
当您需要对状态进行调试或测试时。

4. 如何使用useReducer？

以下是一个使用useReducer的示例：

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return state;
  }
};

const Counter = () => {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: "increment" })}>Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
    </div>
  );
};

export default Counter;