reactjs - React context vs redux vs hooks，应该考虑哪一个以及每一个有何不同

Question

React 已经发布了 Context API 和 React Hooks，但我们大多数人都熟悉 Redux，我们应该考虑使用 Redux。

使用 React Hooks 和 React Context API 的目的是什么？请详细解释 React Redux、Hooks 和 Context API 之间有何不同。

Answer 1

React Context 用于存储状态并在多个组件之间共享状态。当您拥有一棵很深的组件树并且不希望将状态作为 Prop 跨多个级别的组件传递时，它特别有用。 React 中的上下文由 Provider(您在其中设置上下文的值)和 Consumer(您在其中获取值)组成。

React Hooks 提供了 useContext Hook，这是访问上下文值的另一种方式。 useContext 取代了 Consumer 组件。

Redux 是一个状态管理库。它的作用不仅仅是像上下文那样通过 set/get 接口(interface)简单地存储状态。在内部，Redux 实际上使用 React Context 来存储其状态。然而，它还迫使您通过操作来改变状态。如果您的状态更改很复杂(例如，单个操作应该更改状态的多个部分)，那么这是有意义的。在复杂的应用程序中，Redux 可以防止错误和不一致的状态。

根据经验，只要状态更改很简单，您就应该使用 React Context。如果您遇到难以保持状态的多个部分同步的问题，那么考虑 Redux 可能是有意义的。

您想使用 Context Consumers 还是 Hooks 完全取决于您和个人喜好。使用 Hooks 的优点是您可以更轻松地使用多个上下文，而无需使用深层组件树。

上下文消费者:

   <AuthenticationContext.Consumer>
       {user => (
           <LanguageContext.Consumer>
               {language => (
                   <StatusContext.Consumer>
                       {status => (
                           ...
                       )}
                   </StatusContext.Consumer>
               )}
           </LanguageContext.Consumer>
       )}
    </AuthenticationContext.Consumer>

useContext Hook :

const user = useContext(AuthenticationContext)
const language = useContext(LanguageContext)
const status = useContext(StatusContext)

对于Provider来说，无论你是否使用Hooks，它们都是一样的。