使用 redux-toolkit 的 useCallback 和 useMemo 是否有性能提升？

Question

我已经看到很多关于为什么不应该使用 React 的

useCallback

和空依赖列表的描述（这在逻辑上是有意义的），但我一直在试图弄清楚与它一起使用时是否会带来性能提升redux-toolkit，当依赖列表包含 RT 对象时。 （该应用程序对于一个用户来说已经具有足够的性能，没有明显的差异，所以我希望总体上做“正确的事情”。）

一个例子：

export const HomeSettings = () => {
  // redux-toolkit
  const { data, error, isLoading } = useGetUserQuery();
  const [updateUser] = useUpdateUserMutation();

  //useCallback providing an actual optimization here?
  const changeDataFilterOption = useCallback(
    (option: string) => {
      const someObj = someFunc(option, data);
      updateUser(someObj);
    },
    [data, updateUser]
  );

  //useMemo optimizing anything here?
  const itemList = useMemo(() => getListOfThings(data), [data]);

  if (isLoading) {
    return <LoadingMessage />;
  }
  if (error) {
    return <ErrorLoadingDataMessage />;
  }

  return (
    <div onClick={changeDataFilterOption}>
      onClick is silly here, just illustrating the point
      <div>{itemList}</div>
   </div>
  );
}

以这种方式使用 redux-toolkit，记忆我的回调和变量有什么好处吗？

Answer 1

以这种方式使用 Redux-Toolkit，对我的记忆化有什么好处吗？ 回调和变量？

• 使用

  useCallback

  来记忆

  changeDataFilterOption

  功能

  记住

  changeDataFilterOption

  函数没有任何好处，因为它不会作为 prop 传递给另一个 React 组件，而在另一个 React 组件中，它的引用稳定性将是一个问题。它作为

  div

  元素的

  onClick

  处理程序传递。

• 使用

  useMemo

  记住

  itemList

  值

  仅当getListOfThings(data)参考更新时，记住

  data

  的结果可能有好处。如果

  getListOfThings

  是一个繁重/昂贵的函数调用，则记忆以前的结果可以节省重新计算值，因为输入没有改变，我们知道这些值将是相同的。这显然假设

  useGetUserQuery

  正在提供稳定的获取的

  data

  参考。

一般经验法则

1. 对于

   useCallback

   来说，一个好的一般经验法则是，如果将回调函数作为 props 传递给其他 React 组件，你需要记住并提供稳定的回调函数。

2. useMemo

   的一个良好的一般经验法则是仅在以下情况下记忆值：
   • 它们作为 props 传递给其他 React 组件，因此它们作为稳定的引用提供。
   • 计算成本“昂贵”。