使用 React-Redux Hooks 和 React-Redux Connect() 的主要区别是什么? [英] What is the main difference between using React-Redux Hooks and React-Redux Connect()?

问题描述

我即将开始一个使用 React-Redux 的项目.对于 API 参考，有 Hooks 和 connect().因为，钩子是连接 API 的替代品.使用钩子或连接到我的 React-Redux 项目有什么区别.

I am about to start a project with React-Redux. For the APIs references there are Hooks and connect(). Since, Hooks are the alternate of connect APIs. What is the difference of using hooks or connect to my React-Redux project.

推荐答案

使用钩子和 connect 到我的 React-Redux 项目有什么区别

What is the difference between using hooks and connect to my React-Redux project

有两个主要区别:

• 范围
  connect 可以用于 React 类组件和函数组件，而钩子只能用于函数组件.

• Scope
  connect can be used with both React class components and function components whereas hooks can be used with function components only.

性能与简单性
使用钩子更简单.简单是有代价的:与 connect 相比，您可以进行的性能调整更少.哪个更复杂:你调用它传入配置选项(几个或多个)并取回 connect 的配置风格".这种风格是您调用传递给组件以使其重新包装的 HOC.

主要的配置选项之一是已经提到的 mapStateToProps 函数.您不必使用它，但大多数情况下您会使用它.还有 4 个其他函数，它们仅用于为您提供各种机会来提高您将使用 connect 环绕的组件的性能.函数调用:
areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual

所有 4 个都是可选的.您可以作为 connect 配置选项传入，可以不传入，也可以传入部分或全部，并调整性能.值得注意的是，即使你没有传入，那么这些函数的默认实现(它们实际上是性能助手)将应用，因此，你将获得比使用钩子更优化性能的包装组件对应.

Performance vs simplicity
Using hooks is simpler. The simplicity comes at a price: you have less performance tweaks at your disposal in comparison with connect. Which is more complex: you call it passing in configuration options (few or many) and get back the 'configured flavor' of connect. This flavor is the HOC that you call passing in your component to get it back wrapped.

One of the main configuration options is the already mentioned mapStateToProps function. You don't have to use it but it most cases you will. There are 4 other functions that exist solely to give you various opportunities to improve the performance of the component you are going to wrap around using connect. The functions are called:
areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual

All 4 are optional. You can pass in as the connect configuration options either none or some or all of them and tweak the performance. It's worth noting that even if you pass in none, then the default implementations of those functions (which are effectively performance helpers) will apply and as a result, you will get the wrapped component that is more optimised performance-wise than its hooks-using counterpart.

这篇关于使用 React-Redux Hooks 和 React-Redux Connect() 的主要区别是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！