redux - 带有 React.memo 的 useSelector 与连接

Question

从链接中引用。
https://react-redux.js.org/next/api/hooks#performance

我所理解的 useSelector 的好处勾，就是避包装 hell . 包装 hell 由于 connect 的使用正在发生 HOC .如果我们必须使用 React.memo HOC 与 useSelector由于性能原因，简单地使用 connect 会是更好的方法吗？ HOC 反而？因为无论如何我们都必须在 wrapper 的 hell .如果 hell 不是由 connect然后是 React.memo .

任何人请解释React.memo的好处在 connect .

Answer 1

好吧，首先，虽然 React.memo 是一个 HOC，但它并没有像 connect 那样创建相同的嵌套，这很有趣。我创建了一个测试代码:

    import React from "react";
    import ReactDOM from "react-dom";
    import {connect, Provider} from 'react-redux'
    import { createStore } from 'redux'
    import "./styles.css";
    
    const MemoComponent = React.memo(function MyMemo() {
      return <div>Memo</div>;
    });
    
    const ConnectedComponent = connect(null,null)(function MyConnected() {
      return <div>ReduxConnectComponent</div>;
    })
    
    const store = createStore(()=>{},{})
    
    
    function App() {
      return (
        <Provider store={store}>
          <MemoComponent />
          <ConnectedComponent/>
        </Provider>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

这是呈现的结构:

我们可以看到连接的内容被渲染得更深。
其次，文档说:

by default useSelector() will do a reference equality comparison of the selected value when running the selector function after an action is dispatched, and will only cause the component to re-render if the selected value changed. However, unlike connect(), useSelector() does not prevent the component from re-rendering due to its parent re-rendering, even if the component's props did not change.

这意味着当商店的不相关部分发生变化时，不会重新渲染 useSelector 的组件。这是优化中最重要的部分。现在是否使用 React.memo 进行优化完全取决于您的决定，并且在大多数情况下，根本不需要。我们仅在组件渲染成本非常高的情况下使用 React.memo。
总而言之，需要连接包装器才能连接到商店。使用 useSelector 我们不必再包装了。当我们需要优化一些重组件时，我们仍然需要在极少数情况下使用 React.memo 进行包装。 React.memo 的工作也是由 connect 完成的，但在大多数情况下，它是过早的优化。