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

Question

react已发布了上下文api和react钩子，但是我们大多数人都熟悉redux，我们应该考虑这一点。

详细说明使用React钩子和React上下文API的目的。

如何反应redux，反应钩子和反应上下文APi彼此不同。

Answer 1

React Context用于存储状态并在多个组件之间共享状态。当您拥有一堆深厚的组件树并且不想在多个级别的组件之间传递道具的状态时，它特别有用。 React中的上下文由提供者（在其中设置上下文的值）和使用者（在其中获得值）组成。

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

Redux是状态管理库。它不只是像Context那样简单地通过set / get接口存储状态，还可以做很多事情。在内部，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挂钩：

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

对于提供者，无论是否使用挂钩，它们都是相同的。