如何用createSelector（）记忆useElector（）？

Question

我想在我的编程网站上解释redux商店的回忆。

我现在拥有的：

import { useCallback, useMemo, memo } from "react";
import { useSelector, useDispatch } from "react-redux";
import { createSelector } from "reselect";

const Plus = memo(({ onIncrement }) => {
  console.log("rendering <Plus>...");
  return <button onClick={onIncrement}>+</button>;
});

export default () => {
  console.log("rendering <App>...");
  const v = useSelector((state) => {
    console.log("useSelector() invoked");
    return state;
  });
  const dispatch = useDispatch();
  const increment = useCallback(() => dispatch({ type: "INCREMENT" }), [
    dispatch
  ]);
  return (
    <div>
      <span>{v}</span>
      <Plus onIncrement={increment} />
    </div>
  );
};

如您所见，我已经成功地记住了用usecallback（）记住dispatch（）函数。但是，每次单击按钮时，useselector（）被调用两次。

有没有办法只称其为一次？我正在考虑使用“ Reselect”库中的CreateSelector（）记忆。我不明白那个库。有人可以提供一些指导吗？

参考：

1. 使用记忆的选择器 2）'Reselect'库

Answer 1

他们通过将选择器运行2次来正常工作。如果您还将选择器内部的状态（计数器）打印出来，将会更容易，更明显。

参考： https：//reaect-react-react-react-react-react-react.js.ss.org/ API/钩子＃Equality-Comparisons and-updates

事情将是这种方式：

1. 在UI上呈现一个按钮和0。
2. 您单击按钮，该按钮可以派遣操作。
3. 选择器首次运行时，它看到了派遣动作，它检测到返回值的变化，因此迫使组件重新渲染。日志用新值（不是旧值）打印出来。

但是，当操作被派遣到Redux Store时，使用Elector（）仅在选择器结果似乎与最后结果不同的情况下强制重新渲染。从v7.1.0-alpha.5开始，默认比较是严格的===参考比较。这与Connect（）不同，Connect（）使用MapState调用的结果浅层平等检查来确定是否需要重新渲染。这对您应该如何使用useselector（）

有几种影响

4. 组件重新租用器有几种含义，这触发了第二个日志（“渲染...”）。
5. 这也导致选择器的重新运行，这解释了第三log。

当函数组件渲染时，将调用提供的选择器函数，并将其结果从useElector（）挂钩返回。 （如果选择器的功能与组件的先前渲染相同，则可以通过钩子返回缓存结果，而无需重新运行选择器。）