我应该使用 useselector/useDispatch 而不是 mapStateToProps

Question

在创建 React 应用程序时，如果我使用 hook useSelector，我需要遵守 hooks 调用规则（只能从功能组件的顶层调用它）。如果我使用mapStateToProps，我会在道具中获得状态，我可以在任何地方使用它而没有任何问题......同样的问题useDispatch

与使用钩子相比，除了节省代码行之外，使用钩子还有什么好处mapStateToProps？

Answer 1

Redux 存储状态可以从组件中的任何位置读取和更改，包括回调。每当存储状态发生更改时，组件都会重新呈现。当组件重新渲染时， useSelector 再次运行，并为您提供更新的数据，以后可以在您想要的任何地方使用。这是一个示例以及useDispatch回调内部的用法（在根级别分配之后）：

function Modal({ children }) {
  const isOpen = useSelector(state => state.isOpen);
  const dispatch = useDispatch();
  function handleModalToggeled() {
    // using updated data from store state in a callback
    if(isOpen) {
      // writing to state, leading to a rerender
      dispatch({type: "CLOSE_MODAL"});
      return;
    }
    // writing to state, leading to a rerender
    dispatch({type: "OPEN_MODAL"});
  }
  // using updated data from store state in render
  return (isOpen ? (
      <div>
        {children}
        <button onClick={handleModalToggeled}>close modal</button>
      </div>
    ) : (
      <button onClick={handleModalToggeled}>open modal</button>
    );
  );
}

使用 mapStateToProps/mapDispatchToProps 没有什么是使用 useSelector 和 useDispatch 钩子做不到的。

话虽如此，这两种方法之间存在一些值得考虑的差异：

1. 解耦：通过mapStateToProps，容器逻辑（存储数据注入组件的方式）与视图逻辑（组件渲染）分离。useSelector 代表了一种新的、不同的思考连接组件的方式，认为组件之间的解耦更重要，并且组件是自包含的。哪个更好？结论：没有明确的赢家。来源
2. DX（开发者体验）：使用 connect 函数通常意味着每个连接的组件都应该有另一个额外的容器组件，其中使用 useSelector 和 useDispatch 钩子是相当困难的。结论：钩子有更好的 DX。
3. “陈旧的道具”和“僵尸孩子”：useSelector 有一些奇怪的边缘情况，如果它依赖于道具，那么 useSelector 可以在最新更新的道具进来之前运行。这些大多是罕见且可以避免的边缘情况，但它们一直存在已经在旧的连接版本中解决了。结论：connect 比 hooks 稍微稳定一些。来源
4. 性能优化：两者都以不同的方式支持性能优化。connect 有一些高级技术，使用隐藏在 connect 函数中的合并道具和其他选项。useSelector 接受第二个参数 - 一个相等函数，用于确定状态是否已更改。结论：两者都非常适合在高级情况下的表现。
5. 类型：使用带有连接的打字稿是一场噩梦。我记得自己为每个连接的组件（OwnProps、StateProps、DispatchProps）狂热地编写了三个 props 接口。Redux hooks 以一种相当直接的方式支持类型。结论：使用钩子更容易处理类型。
6. React 的未来：Hooks 是 React 的未来。这可能听起来像是一个奇怪的论点，但随着“并发模式”和“服务器组件”的出现，生态系统的改变就在眼前。虽然未来的 React 版本仍将支持类组件，但新功能可能仅依赖于钩子。这种变化当然也会影响生态系统中的第三方库，比如 React-Redux。结论：钩子更能证明未来。

TL;DR - 最终结论：每种方法都有其优点。Connect 更成熟，出现奇怪错误和边缘情况的可能性较小，并且具有更好的关注点分离。Hooks 更易于阅读和编写，因为它们位于使用它们的地方附近（全部在一个独立的组件中）。此外，它们更易于与 TypeScript 一起使用。最后，它们可以很容易地升级到未来的 React 版本。

Answer 2

我认为您误解了“顶级”是什么。它仅仅意味着，在函数组件内部，useSelector()不能放置在循环、条件和嵌套函数中。它与根组件或组件结构没有任何关系

// bad
const MyComponent = () => {
  if (condition) {
    // can't do this
    const data = useSelector(mySelector);
    console.log(data);
  }

  return null;
}

---

// good
const MyComponent = () => {
  const data = useSelector(mySelector);

  if (condition) {
    console.log(data); // using data in condition
  }

  return null;
}

如果有的话，mapStateToPtops位于比钩子调用更高的级别

钩子的规则使得使用那个特定的钩子变得非常困难。您仍然需要以某种方式从回调中的状态访问变化的值

公平地说，您几乎不需要在回调中访问变化的值。我不记得上次我需要那个。通常，如果您的回调需要最新状态，您最好只分派一个动作，然后该动作的处理程序（redux-thunk、redux-saga、redux-observable 等）本身将访问最新状态

这只是一般钩子的细节（不仅仅是 useSelector），如果你真的想要，有很多方法可以解决它，例如

const MyComponent = () => {
  const data = useSelector(mySelector);
  const latestData = useRef()
  latestData.current = data

  return (
    <button
      onClick={() => {
        setTimeout(() => {
          console.log(latestData.current) // always refers to latest data
        }, 5000)
      }}
    />
  )
}

与 mapStateToProps 相比，除了节省代码行之外，使用钩子还有什么好处？

1. 您可以在需要访问 store 时不编写连接函数，并在不再需要访问 store 时将其删除，从而节省时间。react devtools 中没有无尽的包装器
2. 来自 connect 的 props、来自 parent 的 props 和来自 3rd 方库的包装器注入的 props 之间有明显的区别并且没有冲突
3. 有时您（或与您合作的开发人员）会为 props 选择不明确的名称mapStateToProps，您必须一直滚动到mapStateToProps文件中以找出用于此特定 props 的选择器。这不是钩子的情况，其中选择器和变量及其返回的数据耦合在同一行
4. 通过使用钩子，您可以获得钩子的一般优势，其中最大的优势是能够耦合在一起并在多个组件中重用相关的有状态逻辑
5. 用mapStateToProps你通常要处理mapDispatchToProps哪个更麻烦更容易迷路，尤其是阅读别人的代码（对象形式？函数形式？bindActionCreators？）。来自的 PropmapDispatchToProps可以与它的动作创建者具有相同的名称，但具有不同的签名，因为它在mapDispatchToprops. 如果您在多个组件中使用一个动作创建器，然后重命名该动作创建器，这些组件将继续使用来自 props 的旧名称。如果您有依赖循环，并且您必须处理阴影变量名称，则对象形式很容易中断

.

import { getUsers } from 'actions/user'

class MyComponent extends Component {
  render() {
    // shadowed variable getUsers, now you either rename it
    // or call it like this.props.getUsers
    // or change import to asterisk, and neither option is good
    const { getUsers } = this.props
    // ...
  }
}

const mapDispatchToProps = {
  getUsers,
}

export default connect(null, mapDispatchToProps)(MyComponent)