reactjs - useReducer 与 useState 相比实际上有什么优势？

Question

我正在努力理解确切的时间和原因 useReducer与 useState 相比具有优势.有很多争论，但对我来说，没有一个真正有意义，在这篇文章中，我试图将它们应用到一个简单的例子中。
也许我遗漏了什么，但我真的不明白为什么 useReducer应该在 useState 上的任何地方使用.我希望你能帮助我澄清这一点。
让我们以这个例子为例:
版本 A - 使用 useState

function CounterControls(props) {
  return (
    <>
      <button onClick={props.increment}>increment</button>
      <button onClick={props.decrement}>decrement</button>
    </>
  );
}

export default function App() {
  const [complexState, setComplexState] = useState({ nested: { deeply: 1 } });

  function increment() {
    setComplexState(state => {
      // do very complex logic here that depends on previous complexState
      state.nested.deeply += 1;
      return { ...state };
    });
  }

  function decrement() {
    setComplexState(state => {
      // do very complex logic here that depends on previous complexState
      state.nested.deeply -= 1;
      return { ...state };
    });
  }

  return (
    <div>
      <h1>{complexState.nested.deeply}</h1>
      <CounterControls increment={increment} decrement={decrement} />
    </div>
  );
}

看到这个 stackblitz
版本 B - 使用 useReducer

import React from "react";
import { useReducer } from "react";

function CounterControls(props) {
  return (
    <>
      <button onClick={() => props.dispatch({ type: "increment" })}>
        increment
      </button>
      <button onClick={() => props.dispatch({ type: "decrement" })}>
        decrement
      </button>
    </>
  );
}

export default function App() {
  const [complexState, dispatch] = useReducer(reducer, {
    nested: { deeply: 1 }
  });

  function reducer(state, action) {
    switch (action.type) {
      case "increment":
        state.nested.deeply += 1;
        return { ...state };
      case "decrement":
        state.nested.deeply -= 1;
        return { ...state };
      default:
        throw new Error();
    }
  }

  return (
    <div>
      <h1>{complexState.nested.deeply}</h1>
      <CounterControls dispatch={dispatch} />
    </div>
  );
}

看到这个 stackblitz
在很多文章(包括 docs )中，两种说法似乎很流行:
“useReducer 适用于复杂的状态逻辑”。在我们的例子中，假设 complexState真的很复杂，我们有很多修改 Action ，每个 Action 都有很多逻辑。怎么样 useReducer这里有帮助吗？对于复杂的状态，拥有单独的功能而不是拥有单个 200 行的 reducer 功能不是更好吗？
“如果下一个状态取决于前一个状态，则 useReducer 是好的”。我可以用 useState 做同样的事情，不是吗？只需写 setState(oldstate => {...})潜在的其他优势:

“我不必传递多个函数，而只传递一个 reducer ”:好的，但我也可以使用 useCallback 等将我的函数包装到一个“ Action ”对象中。正如已经提到的，在不同的函数中具有不同的逻辑似乎是对我来说是件好事。

“我可以为 reducer 提供一个上下文，这样我的复杂状态就可以在整个应用程序中轻松修改”。是的，但您也可以从该上下文中提供单独的函数(可能由 useCallback 包装)

我看到的缺点:

单个超长函数中的多个不同操作似乎令人困惑

更容易出错，因为您必须检查 reducer 函数或依赖 typescript 等来找出您实际上可以作为操作传递给 reducer 的字符串以及它附带的参数。调用函数时，这要直接得多。

考虑到所有这些:你能给我一个很好的例子吗 useReducer真的很出色，并且不能轻易重写为带有 useState 的版本?

Answer 1

我相信这可能会以意见分歧而告终。然而，从一篇简单的文章中提取的内容对我来说很重要，所以在这里它在底部有一个指向整篇文章的链接。
useReducer() 是 useState() 的替代方法，它使您可以更好地控制状态管理并使测试更容易。所有的情况都可以用 useState() 方法来完成，所以总而言之，使用你觉得舒服的方法，对你和同事来说更容易理解。
引用文章:https://dev.to/spukas/3-reasons-to-usereducer-over-usestate-43ad#:~:text=useReducer()%20is%20an%20alternative,understand%20for%20you%20and%20colleagues .