Question

我将与React-Redux开始一个项目。对于API引用，有Hooks和connect（）。由于，挂钩是连接API的替代方法。使用钩子或连接到我的React-Redux项目有什么区别。

Answer 1

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 2

connect是High Order Component，其工作是提供一种将Redux的商店连接到您的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连接到components内部state的一种不同方法。两者都使用Redux的上下文来在给定的dispatch内公开state和component

Answer 3

通过钩子，您可以直接访问dispatch和恢复状态，而无需使用connect连接组件，并且钩子只能在功能组件中使用

Connect使我们能够将我们的组件（类或函数）与redux-store链接，

您可以从this链接中查阅react-redux挂钩文档。

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

useSelector，通过它我们可以访问redux存储 useDispatch返回dispatch函数，通过该函数我们可以调度redux操作

组件的redux钩子的用法示例为（只能在功能组件中使用）

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实现相同目的（可以在Class或功能组件中使用）

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)

Answer 4

使用钩子或连接到我的React-Redux项目有什么区别

有两个主要区别：

范围
connect可以与React类组件和函数组件一起使用，而钩子只能与函数组件一起使用。
性能与简单性
使用钩子更为简单。简单性是有代价的：与connect相比，您可调整的性能调整更少。这更复杂：您称它为传递配置选项（很少或很多）并返回connect的“配置风格”。这种风味就是您传入组件以使其重新包装的HOC。

主要配置选项之一是上面提到的mapStateToProps函数。您不必使用它，但大多数情况下都可以使用。存在另外四个功能，这些功能仅是为您提供各种机会来提高您将要使用connect包装的组件的性能。这些函数称为：
areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual

所有4个都是可选的。您可以不使用任何一个，也可以使用其中的一些或全部作为connect配置选项，以调整性能。值得注意的是，即使您不传入任何参数，也将应用这些功能的默认实现（实际上是性能帮助器），因此，您将获得比使用钩子的组件在性能方面更优化的包装组件。

使用React-Redux Hooks和React-Redux Connect（）之间的主要区别是什么？

4 个答案: