使用 React-Redux Hooks 和 React-Redux Connect() 的主要区别是什么？

Question

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

Answer 1

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

有两个主要区别：

• 作用域
  connect可以用于 React 类组件和函数组件，而钩子只能用于函数组件。

• 性能 vs 简单
  使用钩子更简单。简单是有代价的：与connect. 哪个更复杂：您称之为传入配置选项（很少或很多）并返回connect. 这种风格是您调用的 HOC，传入您的组件以使其重新包装。
  
  主要配置选项之一是已经提到的mapStateToProps功能。您不必使用它，但大多数情况下您会使用它。还有 4 个其他函数，它们的存在只是为了给您提供各种机会来提高您将要使用的组件的性能connect。调用函数：
  areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual
  
  所有 4 个都是可选的。你可以作为connect配置选项没有或部分或全部并调整性能。值得注意的是，即使你没有传入，那么这些函数的默认实现（它们实际上是性能助手）将应用，因此，你将获得比使用钩子更优化性能的包装组件对应物。

Answer 2

React-Redux 内部使用React Context将组件连接到商店。

该connect()函数将您的组件包装到另一个连接到商店上下文的组件中，并将所选状态作为道具转发给您的组件。

如果你打电话...

const YourConnectedComponent = connect(mapStateToProps)(YourComponent)`

...您可以想象包装器大致如下所示：

const YourConnectedComponent = props => (
    <StoreContext.Consumer>
        {state => <YourComponent {...props} {...mapStateToProps(state, props)} />}
    </StoreContext.Consumer>
);

mapStateToProps在这种情况下，将是您提供给的功能connect()。这是非常简化的，由于各种性能原因，它实际上看起来并不完全像这样，但它适合演示一般概念。

该useSelector钩子还使用商店上下文，但不会为此创建组件。它直接返回选中状态供组件使用。它在内部使用useContext“钩子方式”来使用上下文。

useDispatch只是暴露dispatch()给你的组件，让它用它来调度动作。

从技术上讲，无论您使用钩子还是connect().

Answer 3

connect是High Order Component他们的工作是提供了一种终极版的商店连接到您components。useSelector和useDispatch是等价的hooks。只是做同样事情的另一种技术。

class Component extends React.Component{
    componentDidMount(){
        const { fetchApi, arg } = this.props
        fetchApi(arg)
    }
}
const mapDispatchToProps = dispatch =>({
    fetchApi : arg => dispatch(fetchApi(arg))
})
const mapStateToProps = state =>({
    arg : state.arg
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)

现在等效使用 hooks

const Component = () =>{
    const dispatch = useDispatch()
    const arg = useSelector(state => state.arg)

    useEffect(() =>{
       dispatch(fetchApi(arg))
    },[dispatch, arg])
}

两者都做完全相同的事情，只是连接redux到componentsinternal的不同方法state。两者都使用 Redux 的上下文来暴露dispatch和state在给定的内部component

Answer 4

钩子使您能够dispatch直接访问 redux-state，而无需使用连接组件，connect并且钩子只能在功能组件中使用

Connect使我们能够将我们的组件（类或功能）与redux-store，

您可以从此链接参考react-redux钩子文档。

它提供了不同的钩子，例如

useSelector使用它我们可以访问 redux store useDispatch返回dispatch函数，我们可以使用它来调度 redux actions

组件的 redux hooks 的示例用法是（只能在功能组件中使用）

functions Test() {
const dispatch = useDispatch()
const count = useSelector(state => state.counter)
// If you want to dispatch a redux action using hooks then
// Assume a redux action called increaseCounter

return (
<>
<p>{count}</p>
<button onClick={() => {dispatch(increaseCounter(count + 1))}}>
ClickMe!
</button></>)
}

如果你想使用 connect 来实现相同的目的（你可以在类或功能组件中使用它）

function Test() {
  return (
    <>
      <p>{this.props.count}</p>
      <button onClick={() => {this.props.increaseCounter(this.props.count+1)}}>Click Me!</button>
    </>
  );
}

const mapStateToProps = state => {
  return {
    count: state.counter
  };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators({ increaseCounter }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Test)