记忆或不记忆 React 组件的常用方法是什么？答案

【问题标题】：What is a common approach to memoize or not React components?记忆或不记忆 React 组件的常用方法是什么？
【发布时间】：2021-01-20 08:38:28
【问题描述】：

假设我有一个这样的组件

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

    // some other elements with otherProps
  </div>

假设 angels 数组有 200 个项目。这部分有什么意义吗

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

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

如果我要记忆那个有 200 个天使的块，它会告诉 React 保留 DOM 元素 <div className='AngelsList'> 原样而不检查其所有子元素的属性，否则记忆将只影响 JSX 对象并检查 DOM 属性会发生还是？

希望我解释清楚

【问题讨论】：

用户是否一次查看所有200 angels？所有的 DOM 元素都在视口上方？如果没有，那么您可以使用 https://github.com/bvaughn/react-window 之类的东西来仅渲染视口上方的组件。
@PrateekThapa 问题不在于它

标签： javascript reactjs memoization

【解决方案1】：

首先 - 让我们明确定义 memoization 的含义。
来自Wikipedia：

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

所以，记忆是存储函数调用的结果。在react 的范围内 - 您将存储render 函数的结果（如果那是类组件），或者调用功能组件的结果（函数本身）。
因此，任何内部检查、DOM 检查、内部计算都将在初始函数调用期间执行并存储。

【讨论】：

【解决方案2】：

我认为您应该使用useMemo 并将更多组件拆分得更小，以避免不必要地重新渲染

【讨论】：