记忆或不记忆React组件的常用方法是什么?

Question

假设我有一个这样的组件

const AngelsList = ({ angels, ...otherProps }) => 
<div className='AngelsListBlock'>
<div className='AngelsList'>
{ angels.map(angel => <Angel item={angel} />) }
</div>
// some other elements with otherProps
</div>

，假设天使数组有200个元素。这部分有必要背吗?

<div className='AngelsList'>
{ angels.map(angel => <Angel item={angel} />) }
</div>

考虑到每个Angel组件内部有许多dom元素，但没有昂贵的计算?

如果我将记忆块与200个天使在里面，它会告诉React离开DOM元素<div className='AngelsList'>，因为它是，而不是检查所有的子属性或记忆将影响只有JSX对象和检查DOM属性会发生什么?

希望我解释清楚了

Answer 1

首先，让我们明确memoization的含义。
来自维基百科:

在计算中，memoization或memoisation是一种优化技术，主要用于通过存储昂贵的函数调用的结果，并在再次出现相同的输入时返回缓存的结果来提高计算机程序的速度。

所以，记忆就是存储函数调用的结果。在react的作用域中，您将存储render函数的结果(如果它是类组件)，或者调用功能组件的结果(函数本身)。
因此，任何内部检查，DOM检查，内部计算都将在初始函数调用期间执行并存储。

Answer 2

我认为你应该使用useMemo，将更多的组件分割成更小的，以避免不必要的渲染