Reactjs useReducer实际上比useState有什么优势？

我很难理解与

useState

相比，

useReducer

究竟什么时候以及为什么具有优势。有很多论证，但对我来说没有一个是真正有意义的，在这篇文章中，我试图将它们应用到一个简单的例子中

也许我遗漏了什么，但我真的不明白为什么

useReducer

应该在

useState

的任何地方使用。我希望你能帮我澄清这一点

让我们举一个例子：

版本A-使用useState

功能计数器控制（道具）{
返回(
增量
减量
);
}
导出默认函数App（）{
const[complexState，setComplexState]=useState（{nested:{deep:1}}）；
函数增量（）{
setComplexState（状态=>{
//在这里执行非常复杂的逻辑，这取决于之前的complexState
state.nested.deep+=1；
返回{…状态}；
});
}
函数减量（）{
setComplexState（状态=>{
//在这里执行非常复杂的逻辑，这取决于之前的complexState
state.nested.deep-=1；
返回{…状态}；
});
}
返回(
{complexState.nested.deep}
);
}

看到这个了吗

版本B-带useReducer

从“React”导入React；
从“react”导入{useReducer}；
功能计数器控制（道具）{
返回(
props.dispatch（{type:“increment”}）}>
增量
props.dispatch（{type:“decrement”}}>
减量
);
}
导出默认函数App（）{
const[complexState，dispatch]=useReducer（reducer{
嵌套：{1}
});
功能减速机（状态、动作）{
开关（动作类型）{
案例“增量”：
state.nested.deep+=1；
返回{…状态}；
“减量”一案：
state.nested.deep-=1；
返回{…状态}；
违约：
抛出新错误（）；
}
}
返回(
{complexState.nested.deep}
);
}

看到这个了吗

在很多文章中（包括这篇文章），两种观点似乎非常流行：

“useReducer适用于复杂的状态逻辑”。在我们的示例中，假设

complexState

非常复杂，我们有许多修改操作，每个操作都有很多逻辑。

useReducer

在这里有什么帮助？对于复杂状态，使用单个函数而不是单个200行减缩器函数不是更好吗

“如果下一个状态依赖于上一个状态，则useReducer是好的”。我可以用useState做同样的事情，不是吗？只需编写

setState（oldstate=>{…}）

潜在的其他优势：

• “我不必传递多个函数，只传递一个reducer”：好的，但我也可以用useCallback等将我的函数包装成一个“actions”对象。正如前面提到的，在不同的函数中使用不同的逻辑对我来说似乎是件好事
• “我可以为reducer提供一个上下文，以便在整个应用程序中轻松修改我的复杂状态”。是的，但您也可以从该上下文中提供独立函数（可能由useCallback包装）

我明白了：

• 在一个超长函数中执行多个不同的操作似乎令人困惑
• 更容易出错，因为您必须检查reducer函数或依赖于typescript等，以找出可以作为操作传递给reducer的字符串以及随附的参数。在调用函数时，这要简单得多

---

考虑到所有这些：你能给我一个好的例子吗？

useReducer

真的很出色，而且很难用

useState

重写成一个版本？

我相信这可能会导致意见分歧。然而，这篇从一篇简单文章中摘录出来的内容对我来说很有意义，因此这里的底部有一个指向整篇文章的链接

useReducer（）是useState（）的替代品，它使您能够更好地控制状态管理，并使测试更容易。所有的案例都可以使用useState（）方法来完成，因此，总之，使用您熟悉的方法，您和同事更容易理解

参考条款：