Quartz 4

04Redux 使用方式对比：connect 和 useDispatch与useSelector

7 min read

Redux 使用方式对比：connect 和 useDispatch/useSelector

在 React 中，connect 和 useDispatch/useSelector 是两种将 Redux 状态和操作连接到 React 组件的方式。随着 React 的发展，useDispatch 和 useSelector 提供了更简洁的方式来处理 Redux 状态和操作。下面是 connect 和 useDispatch/useSelector 的详细对比笔记，帮助开发者理解这两种方式的适用场景和特点。

1. connect 连接 Redux 状态和操作

connect 是 react-redux 提供的高阶组件（HOC），它将 Redux 的状态和 dispatch 方法注入到 React 组件的 props 中。

使用 connect 的基本步骤

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions/counterActions';
 
// 组件
const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};
 
// mapStateToProps：从 Redux state 中提取需要的数据
const mapStateToProps = (state) => ({
  count: state.count,
});
 
// mapDispatchToProps：将 dispatch 方法与 action creators 连接
const mapDispatchToProps = {
  increment,
  decrement,
};
 
// 使用 connect 连接 Redux 和组件
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

connect 的特点

  • 优点：

    1. 高效的性能：connect 会优化性能，只有当 Redux store 中的 state 与组件相关的部分发生变化时，组件才会重新渲染。
    2. 灵活性：connect 允许你灵活地将 Redux 的 state 和 dispatch 方法映射到组件的 props 上。
    3. 适合大型项目：在大型应用中，connect 可以帮助你组织不同的 Redux 逻辑，使代码更模块化和可维护。

  • 缺点：

    1. 代码冗长：需要手动定义 mapStateToProps 和 mapDispatchToProps，对于简单的应用来说，稍显繁琐。
    2. 不够直观：对于新手来说，理解 connect 的原理和使用方式需要时间。

2. useDispatch 和 useSelector（React Hooks）

useDispatch 和 useSelector 是 React Redux v7.1.0 引入的 Hooks API，提供了一种更简洁的方式来访问 Redux 的 dispatch 方法和 Redux store 中的 state。

使用 useDispatch 和 useSelector 的基本步骤

import React from 'react';
import { useDispatch, useSelector } from 'react-redux'; // 引入 hooks
import { increment, decrement } from './actions/counterActions';
 
const Counter = () => {
  // 使用 useSelector 获取 Redux 状态
  const count = useSelector((state) => state.count);
 
  // 使用 useDispatch 获取 dispatch 方法
  const dispatch = useDispatch();
 
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};
 
export default Counter;

useDispatch 和 useSelector 的特点

  • 优点：

    1. 简洁直观：Hooks API 更简洁且易于理解，特别是对于函数组件，它使得代码更为简洁。
    2. 更少的模板代码：不需要显式地定义 mapStateToProps 和 mapDispatchToProps，直接在组件中通过 useSelector 获取状态，使用 useDispatch 触发 action。
    3. 更强的组合性：可以将多个 useSelector 或 useDispatch 组合使用，从而灵活地管理状态。

  • 缺点：

    1. 性能问题：如果使用不当，useSelector 会在每次组件渲染时重新订阅和取消订阅，这可能会影响性能。尽管 react-redux 会通过 shallowEqual 对比来优化，但仍然需要小心。
    2. React 版本要求：useDispatch 和 useSelector 只能在 React 16.8 及以上版本中使用。

3. connect 和 useDispatch/useSelector 的对比

特性connectuseDispatch 和 useSelector
简洁性较为冗长，需要定义 mapStateToProps 和 mapDispatchToProps更简洁，直接在组件中使用 hooks 访问 Redux 状态和 dispatch
性能优化性能，只有需要的数据发生变化时才重新渲染组件需要小心使用 useSelector，避免不必要的渲染
函数组件支持支持函数组件，但需要使用 connect 包裹组件完全支持函数组件，推荐在函数组件中使用
类型安全（TS）更好地支持类型推导，尤其在 TypeScript 中需要自己手动管理 useSelector 和 useDispatch 的类型
复杂性适合较复杂的应用，尤其当需要多次共享状态时适合简单和中等复杂度的应用
兼容性兼容较老版本的 React（低于 16.8）只支持 React 16.8 及以上版本
可组合性不支持直接组合多个 connect，每个 connect 都是独立的可以轻松组合多个 useSelector 和 useDispatch

4. 何时使用 connect，何时使用 useDispatch 和 useSelector

使用 connect 的场景

  1. 类组件：connect 是类组件连接 Redux 的唯一选择。
  2. 大型项目：当你需要对状态进行优化和分离时，connect 提供了很好的性能优化，适合复杂应用。
  3. 性能优化：在性能要求较高的项目中，connect 提供了很好的性能优化（仅在相关的 state 变化时重新渲染）。

使用 useDispatch 和 useSelector 的场景

  1. 函数组件：在现代 React 项目中，函数组件是主流，useDispatch 和 useSelector 是推荐的方式。
  2. 简单或中等复杂度项目：对于较简单的应用，useDispatch 和 useSelector 使得代码更简洁，易于管理。
  3. 快速开发：希望快速开发和响应式更新时，Hooks API 提供了更简洁的方式来处理 Redux 状态。

5. 总结

  • connect：适用于大型、复杂的应用，能够提供更强的性能优化和灵活的状态管理。特别是在使用类组件时是唯一选择。
  • useDispatch 和 useSelector：适用于函数组件，简洁、直观、易于理解，适合中小型项目，能够提高开发效率和可维护性。

最终，选择哪种方式应根据项目的需求、团队的开发习惯和 React 版本来决定。

Graph View