useCallback 和 useMemo 与 redux-toolkit 的性能提升吗？

发布于 2025-01-11 02:58:27 字数 1118 浏览 0 评论 0原文

我已经看到很多关于为什么不应该使用 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 ，记忆我的回调和变量有什么好处吗？

原文

I've seen a lot of descriptions of why you shouldn't use React's useCallback with an empty dependency list (which makes logical sense), but I'm stuck trying to figure out if there are performance gains when using it alongside redux-toolkit, when the dependency list includes RT objects. (The application is already performant enough with one user that there's no perceptible difference, so I'm looking to do the "right thing" in the aggregate.)

An example:

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>
  );
}

Using redux-toolkit in this way, is there any benefit to memo-izing my callbacks and variables?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清浅ˋ旧时光 2025-01-18 02:58:27

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

使用useCallback来记忆changeDataFilterOption函数
记住 changeDataFilterOption 函数没有任何好处，因为它不会作为 props 传递给另一个 React 组件，而在另一个 React 组件中，它的引用稳定性会成为问题。它作为 div 元素的 onClick 处理程序传递。
使用 useMemo 记住 itemList 值
仅当记住 getListOfThings(data) 的结果可能有好处 >数据参考更新。如果 getListOfThings 是一个繁重/昂贵的函数调用，则可以通过重新计算值来保存以前的结果，因为输入没有改变，我们知道这些值将是相同的。这显然假设 useGetUserQuery 正在提供稳定的获取的数据引用，我相信它确实如此，仅在端点运行时更新并更新查询缓存 .

一般经验法则

useCallback 的一个良好的一般经验法则是，如果将回调函数作为 props 传递给其他 React 组件，您需要记住并提供稳定的回调函数。
useMemo 的一个良好的一般经验法则是仅在以下情况下记忆值
- 它们作为 props 传递给其他 React 组件，因此它们作为稳定的引用提供。
- 计算成本“昂贵”。