reactjs - 如何用react hooks完全替代redux？

Question

我正在考虑使用 react hooks [useReducer, useContext] 和 context api 来代替 redux。话虽如此，我希望我的状态在结构上有点复杂。让我们看看结构如下

state = {
    key1: true,
    key2: {
        key3: [],
        key4: ''
    }
}

我清楚的是 redux 和 context api 都允许我创建复杂的结构。如果使用 React Hooks，我可以很好地使用 Provider、Consumer/useContext 将我的存储状态值传递给我的所有组件。

Redux 给我更多的是，如果任何特定的键 key4 被更新，那么帮助我不使用 react-redux 的连接函数重新渲染整个应用程序树。这是我的查询。

How can we make react hooks and context api to not to re-render my entire app which is a major performance bug?

Answer 1

这是仅靠 React 上下文无法实现的。当然，您可以使用 useMemo 进行欺骗，这样您的 Provider 的直接子级就不会重新呈现，但除此之外:每次上下文值的任何属性发生变化时，所述上下文的所有消费者都会重新呈现，无论他们是否使用了特定的属性(property)与否。您不能仅针对某些子项退出上下文重新渲染。

一旦 useContextSelector 集成到 React 中，这在未来可能会改变，但目前，这只是标准的 React 行为，没有办法解决。

您可以在“上下文与真实状态管理解决方案”中找到更多信息 in this article .

现在，如果您只是想减少样板代码，最好继续阅读 modern redux或者查看其他成熟的状态管理库，如 mobx 或 recoil。但是，如果不完全重新实现其中之一，您将无法单独使用上下文 - 那有什么意义呢？