Question

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

使用react钩子和react上下文API的目的进行了详细说明。

react redux，react hooks和React context APi如何彼此不同。

Answer 1

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

反应挂钩提供了useContext挂钩，这是访问上下文值的另一种方法。 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)

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

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

1 个答案: