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

Question

创建 React 应用程序时，如果我使用 Hook useSelector ，我需要遵守钩子(Hook)调用规则(只能从功能组件的顶层调用它)。如果我使用 mapStateToProps ，我得到了 Prop 中的状态，我可以在任何地方使用它而没有任何问题... useDispatch 的相同问题
与 mapStateToProps 相比，使用钩子(Hook)除了节省代码行之外还有什么好处？ ?

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 钩子(Hook)做的。
话虽如此，这两种方法之间存在一些值得考虑的差异:

解耦:与 mapStateToProps ，容器逻辑(存储数据注入(inject)组件的方式)与 View 逻辑(组件渲染)是分开的。useSelector代表了一种新的和不同的思考连接组件的方式，认为解耦在组件之间更重要，并且组件是自包含的。哪个更好？判决:没有明确的赢家。 source

DX(开发者体验):使用 connect函数通常意味着每个连接的组件应该有另一个额外的容器组件，其中使用 useSelector并且 useDispatch 钩子(Hook)非常简单。结论:钩子(Hook)有更好的 DX。

“陈旧的 Prop ”和“僵尸 child ”:useSelector 有一些奇怪的边缘情况，如果它依赖于 Prop ，其中 useSelector可以在最新更新的 Prop 出现之前运行。这些大多是罕见且可避免的边缘情况，但它们已经在较旧的 connect 中解决了。版本。结论:connect 比 hooks 稍微稳定一些。 source

性能优化:两者都以不同的方式支持性能优化:connect有一些先进的技术，使用连接功能中隐藏的合并 Prop 和其他选项。 useSelector接受第二个参数 - 确定状态是否已更改的相等函数。结论:两者都非常适合在高级情况下的表现。

类型:使用带有 connect 的 typescript 是一场噩梦。我记得自己狂热地为每个连接的组件(OwnProps、StateProps、DispatchProps)编写了三个 props 接口(interface)。 Redux 钩子(Hook)以一种相当直接的方式支持类型。结论:类型使用钩子(Hook)更容易使用。

React 的 future :Hooks 是 React 的 future 。这似乎是一个奇怪的论点，但生态系统的变化指日可待，“并发模式”和“服务器组件”。虽然 future 的 React 版本仍将支持类组件，但新功能可能仅依赖于钩子(Hook)。这种变化当然也会影响到生态系统中的第三方库，比如 React-Redux。结论:钩子(Hook)更具 future 性。

TL;DR - 最终判决:每种方法都有其优点。 connect更成熟，出现奇怪错误和边缘情况的可能性更小，并且具有更好的关注点分离。 Hooks 更容易读写，因为它们被放置在使用它们的地方附近(都在一个独立的组件中)。此外，它们更易于与 TypeScript 一起使用。最后，它们将很容易升级到 future 的 React 版本。