Redux Connect 与 Container 的区别-JavaScript中文网-JavaScript教程资源分享门户

在 React/Redux 的开发中，我们常常需要将组件和 Redux 的 store 进行连接，以便于组件能够获取 store 中的数据并进行渲染。这时候我们会用到 react-redux 中的两个重要的概念：connect 和 Container。

什么是 Redux Connect

connect 是 react-redux 中提供的一个高阶函数，它的作用是将组件和 Redux 的 store 进行连接，使组件能够获取 store 中的数据并进行渲染。

connect 函数的用法如下：

// javascriptcn.com 代码示例
import { connect } from 'react-redux';

const mapStateToProps = (state) => ({
  // 这里返回的对象中的属性就是组件中可以通过 props 访问到的属性
  // 它们的值就是从 store 中取出的数据
  count: state.count,
});

const mapDispatchToProps = (dispatch) => ({
  // 这里返回的对象中的属性就是组件中可以通过 props 访问到的属性
  // 它们的值就是一个函数，用于 dispatch action
  increment: () => dispatch({ type: 'INCREMENT' }),
});

const MyComponent = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在上面的例子中，mapStateToProps 函数用于将 store 中的 count 属性映射到组件的 count 属性上，mapDispatchToProps 函数用于将一个 increment 函数映射到组件的 increment 属性上，该函数用于 dispatch 一个 INCREMENT 的 action。

什么是 Container

Container 是 react-redux 中提供的一个组件，它的作用是将组件和 Redux 的 store 进行连接，使组件能够获取 store 中的数据并进行渲染。

Container 组件的用法如下：

// javascriptcn.com 代码示例
import { Container } from 'react-redux';

const mapStateToProps = (state) => ({
  // 这里返回的对象中的属性就是组件中可以通过 props 访问到的属性
  // 它们的值就是从 store 中取出的数据
  count: state.count,
});

const mapDispatchToProps = (dispatch) => ({
  // 这里返回的对象中的属性就是组件中可以通过 props 访问到的属性
  // 它们的值就是一个函数，用于 dispatch action
  increment: () => dispatch({ type: 'INCREMENT' }),
});

const MyComponent = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

const MyContainer = Container.create(MyComponent, mapStateToProps, mapDispatchToProps);

export default MyContainer;

从上面的例子中，我们可以看出 connect 和 Container 的用法非常相似，它们都是将组件和 Redux 的 store 进行连接，使组件能够获取 store 中的数据并进行渲染。那么它们的区别在哪里呢？

其实，它们的本质是一样的，都是将组件和 Redux 的 store 进行连接。但是，它们的实现方式不同。

connect 是一个高阶函数，它接收一个组件作为参数，并返回一个新的组件，这个新的组件会将 store 中的数据作为 props 传递给原来的组件。这种方式更加灵活，可以在任何地方使用。

Container 是一个组件，它接收一个组件作为参数，并返回一个新的组件，这个新的组件会将 store 中的数据作为 props 传递给原来的组件。这种方式更加固定，只能在特定的地方使用。

另外，Container 的实现是基于 connect 的，它实际上就是对 connect 的封装。因此，Container 具有 connect 的所有功能，但是它还提供了一些额外的功能，比如 shouldComponentUpdate 方法的优化。

总结

connect 和 Container 都是将组件和 Redux 的 store 进行连接的方式，它们的本质是一样的，但是它们的实现方式不同。connect 是一个高阶函数，它接收一个组件作为参数，并返回一个新的组件；Container 是一个组件，它接收一个组件作为参数，并返回一个新的组件。另外，Container 的实现是基于 connect 的，它具有 connect 的所有功能，但是它还提供了一些额外的功能，比如 shouldComponentUpdate 方法的优化。

在实际开发中，我们可以根据情况选择使用 connect 或 Container，但是需要注意它们的使用方式和区别。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657d438ed2f5e1655d811614