记忆是 React 的一个特性。该库比较(以浅显的方式)对象的两个版本,如果它们相同,则不会重新渲染(或重新编译)它,从而在性能和内存方面进行优化。

组件上使用的 React.memo 高阶组件(注意,不是 useMemo)非常容易实现,但它并不总是有效或必要的。就像 React 中关于记忆的一切一样,我们不应该记忆所有东西,而只记忆那些很重、很大或经常重新渲染的对象。

所以在我的工作中发生了一个有趣的案例。我有一个相当大的父组件,它包裹在较小的子组件中。我将更改主题类型和组件名称,但我给出的示例与我的示例相同。

我们如何记忆一个组件?

假设我们有:

  const BigComponent = ({...lots of props}) => {...lots of stuff done}

进入全屏模式 退出全屏模式

然后我们只是把备忘录放在出口上

  export default memo(BigComponent)

进入全屏模式 退出全屏模式

够了吗?有时候是的。但更有趣的部分是另一个。 React 如何知道要比较什么?它需要以前的版本和下一个版本(我们正在使用新道具更新的版本)。同样,memo 可以使用这两个版本作为回调参数。可以检查它们以进行更快的比较,从而进一步加快记忆过程。

假设我们的 BigComponent 主要是管理一张学校学生卡,并且我们有根据学生显示的子组件。然后,当学生的 id 更改时(假设它是从父组件映射的),我们将假设 BigComponent 发生更改。

  const BigComponent = ({student, ...other props}) => {...lots of stuff done}

进入全屏模式 退出全屏模式

我们现在可以记住比较学生 ID 的组件。我们可以将 ID 视为对象的键。如果它们相同,则组件将保持不变,否则将重新渲染。

但正如你所见,我的做法略有不同!

  export default memo(BigComponent, (prev, next) => prev.student.id !== next.student.id)

进入全屏模式 退出全屏模式

上面会说:如果前一个 ID 与下一个 ID 不同,则返回 true。这里的问题是我们正在获取道具并且我们在子组件上使用它们,所以如果 ID 相同(u003du003du003d)它不会做任何事情(不会打开卡片)。

就我而言,它会检查 ID 是否不同,并且不执行任何操作。但如果它们相同,它将允许重新渲染。它类似于 ShouldComponentUpdate 的工作方式,因为我们给出了何时重新渲染的条件。

因此,总而言之,我们仅在 ID(键)更改时才以相反的方式记忆(而不是重新渲染)该组件。这意味着当我们打开一张学生卡时,它会重新呈现。但是当我们添加更多学生,或者我们使用其他学生卡时,他们不会在页面中重新呈现,我们将获得性能提升。