记住我所有的反应组件是个好主意吗? [英] Is it a good idea to memoize all of my react components?

问题描述

我最近决定刷新 react 的文档并遇到了 https://reactjs.org/docs/react-api.html#reactmemo (React.memo).

I've recently decided to refresh on react's documentation and came across https://reactjs.org/docs/react-api.html#reactmemo (React.memo).

乍一看，它似乎适合我的几乎所有功能组件.所以我就这样做了，并在所有这些文件上应用了 memo.

At first glance it looked like a good candidate for pretty much all of my function components. So I did just that and applied memo on all of them.

我不确定我是否能够注意到显着的性能提升，但它肯定不会使速度变慢.

I'm not sure if I am able to notice dramatic performance boost, but it for sure didn't make anything slower.

因此问题是:我是否应该默认将 memo 应用于我的所有功能组件，以防万一，以便我可以捕获重新渲染大量元素的边缘情况?这有什么缺点/我需要注意的其他事情吗?

Hence the question: should I apply memo to all my fucntion components by default, just in case so I can catch edge cases of re-rendering a lot of elements? Are there any drawbacks to this / something else i need to be aware of?

推荐答案

不，默认情况下您不应该记住所有功能组件.您应该根据具体情况决定何时执行此操作.

No, you shouldn't memoize all your function components by default. You should decide when to do this on a case-by-case basis.

来自文档:

如果您的函数组件在给定相同的 props 的情况下呈现相同的结果，您可以将其包装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能.

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result.

想象一下，您向函数组件添加了一些副作用，例如，从 Date.now() 读取当前时间.该组件将在第一次使用某些道具调用时按预期工作，但下次使用相同的道具调用时，将使用旧时间.这可能会导致令人困惑的错误.

Imagine that you add some side effect to your function component, for example, reading the current time from Date.now(). The component will work as expected the first time it's called with certain props, but the next time it's called with those same props, the old time will be used. This can lead to confusing bugs.

例如，如果一个组件不太可能使用相同的 props 被调用，那么记住结果可能会导致更糟的性能.毕竟，记忆只是存储对对象的函数调用的结果，其中键是从函数的输入中派生出来的，值是函数调用的结果.如果您永远不会使用它，为什么要存储它?

For example, if it's unlikely a component will ever be called with the same props, then memoizing the result will likely lead to worse performance. After all, memoization is just storing the result of a function call to an object, where the key is derived from the input to the function and the value is the result of the function call. Why store this if you'll never use it?

如果您的函数组件不需要很多 CPU 周期来渲染，那么任何性能优化都可能可以忽略不计.但是现在可以稍后为该组件添加副作用，忘记它正在被记忆，并浪费时间修复由此产生的错误.

If your function component doesn't take many CPU cycles to render, then any performance optimization is likely going to be negligible. But it's now possible to later add side effects to that component, forget that it's being memoized, and waste time fixing the resulting bugs.

同样，来自文档:

此方法仅作为性能优化存在.不要依赖它来阻止"渲染，因为这会导致错误.

This method only exists as a performance optimization. Do not rely on it to "prevent" a render, as this can lead to bugs.

这篇关于记住我所有的反应组件是个好主意吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！