useSelector与React.memo vs connect

Question

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

我理解useSelector钩子的好处是避免包装器地狱。包装器地狱是由于使用connect HOC而发生的。如果由于性能原因，我们必须使用React.memo HOC和useSelector，那么简单地使用connect HOC会更好吗？因为在任何情况下，我们都必须在、wrappers、中。如果不是connect的话，那么它就是React.memo的了。

任何一个人都请解释React.memo相对于connect的好处。

Answer 1

首先，虽然React.memo是一个临时的，但它创建的嵌套并不像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);

以下是呈现的结构：

​

​

我们可以看到，用于连接的内容呈现得更深。

第二，医生说：

默认情况下，useSelector()将在发送操作后运行选择器函数时对所选值进行引用相等比较，并且只会导致组件在所选值发生更改时重新呈现。但是，与connect()不同，useSelector()并不阻止组件因为其父重呈现而重新呈现，即使组件的道具没有改变。

这意味着当存储的不相关部分发生变化时，不会重新呈现useSelector的组件。这是优化中最重要的部分。现在是否使用React.memo进行优化完全取决于您的决定，而且在大多数情况下，根本不需要它。我们只在组件渲染非常昂贵的情况下使用React.memo。

总之，连接包装器需要连接到存储区。有了useSelector，我们就不用再包装了。当我们需要优化一些沉重的组件时，我们仍然需要在很少的情况下使用React.memo。React.memo的工作也是通过connect来完成的，但在大多数情况下，这是过早的优化。

Answer 2

我一直试图得到一个答案很长一段时间，但我得到的答案还不清楚。尽管Redux文档中的理论并不复杂：useSelector使用严格的等式，===和connect使用浅等式来确定。因此，在这两种情况下，如果您从Redux状态(数字、字符串、布尔值)中“提取”一个原始值，您将得到相同的结果。如果值没有改变，则没有一个组件会重命名。如果您正在“拉动”非原语(数组或对象)，而且这两种情况下的值都没有改变(useSelector，connect)，那么使用useSelector的组件仍然会重命名，因为当然，[] === []将始终是假的，因为它们引用的是不同的数组，因为connect组件不会重发。现在，为了使useSelector的行为类似于而不是重新复制，您可以这样做：const object = useSelector(state => state.object, shallowEqual)，您可以从react-redux导入shallowEqual。或者通过使用reselect库使用该状态的回忆录版本：

const makeGetObject = () => createSelector(state => state.object, object => object)

并将其添加到选择器中，如：const object = useSelector(state => state.object, makeGetObject);，我在试图获取代码框底部时创建了这个代码框(请检查WithUseSelector组件上的注释)：useSelector vs connect()

Answer 3

我只是定制了useSelector钩子以避免这样做，而且效果很好。

​

import { useSelector, useDispatch } from 'react-redux'
import { _lodash } from '../../../lodash'

export const useCloneSelector = (selector = (obj) => obj) => {
  const selectWithClonedState = (state = {}, ...others) => selector(_lodash.cloneDeep(state), ...others)
  return useSelector(selectWithClonedState, _lodash.isEqual)
}

export { useDispatch, useSelector }

​