如何使Memoization与UseCallback（）和Redux-toolkit createSelector（）一起使用？

Question

根据此处的文档：

创建唯一的选择器实例：

在许多情况下，需要在多个组件中重复使用选择器函数。如果组件都将所有参数都调用选择器，则它将打破记忆 - 选择器永远不会多次看到相同的参数，因此永远无法返回缓存的值。

。

这里的标准方法是在组件中创建一个记忆的选择器的唯一实例，然后将其与useElector一起使用。这允许每个组件始终如一地将相同的参数传递给其自己的选择器实例，并且选择器可以正确记忆结果。

对于功能组件，通常是使用USEMEMO或USECALLBACK完成的：

当我做 codesandbox上的以下内容：

import { useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, selectSum } from "./reducer";

function Sum({ value }) {
  const selectSumMemoized = useCallback(selectSum, []);
  const sum = useSelector((state) => selectSumMemoized(state, value));
  return (
    <div>
      sum: {sum} (10+100+{value})
    </div>
  );
}

export default () => {
  const dispatch = useDispatch();
  return (
    <div>
      <Sum value={1} />
      <Sum value={2} />
      <button onClick={() => dispatch(increment())}>
        change state and re-render
      </button>
    </div>
  );
};

当我通过重复单击按钮启动重新渲染时，SelectSum登录的输出选择器两次，暗示Memoization不是跨多个组件工作。

我需要做出什么更改才能正常工作？

Answer 1

我发现了。

基本上，我需要定义和使用以下功能（只需add（）=＆gt;）：

const makeSelectSum = () =>
  createSelector([select100, select10, (state, n) => n], (a, b, num) => {
    console.log("output selector called: " + num);
    return a + b + num;
  });

然后：

const selectSumMemo = useMemo(makeSelectSum, []);
const sum = useSelector((state) => selectSumMemo(state, value));

或：

const selectSumMemo = useCallback(makeSelectSum(), []);
const sum = useSelector((state) => selectSumMemo(state, value));

而不是直接使用此功能：

const selectSum =
  createSelector([select100, select10, (state, n) => n], (a, b, num) => {
    console.log("output selector called: " + num);
    return a + b + num;
  });