10、React 中的记忆化：深入理解 React.memo 和 useMemo

React 中的记忆化：深入理解 React.memo 和 useMemo

1. React.memo 工作原理概述

在 React 中，当发生更新时，组件会与上一次渲染返回的虚拟 DOM（vDOM）结果进行比较。若结果不同，即 props 发生变化，协调器会根据元素是否已存在于宿主环境（通常是浏览器 DOM）执行更新或插入操作；若 props 相同，组件仍会重新渲染，DOM 也会更新。

React.memo 的作用是在组件的 props 在多次渲染中相同时，避免不必要的重新渲染。但问题来了，我们应该对多少内容进行记忆化，频率如何呢？是否对每个组件都进行记忆化，应用整体就会更快呢？

2. 记忆化组件仍重新渲染的情况

React.memo 对 props 进行浅比较以确定其是否发生变化。然而，JavaScript 中，标量类型（如数字、字符串、布尔值等）可以准确比较，而非标量类型（如对象、数组、函数）则不能。下面我们来详细了解这两种类型。

• 标量类型（原始类型） ：标量类型是基础类型，代表单一、不可分割的值。它们没有属性或方法，且本质上是不可变的，一旦设置就不能在不创建新值的情况下更改。JavaScript 中的标量类型包括数字、字符串、布尔值、符号、BigInts、undefined 和 null。比较标量值时，我们关注的是其实际内容或值。
• 非标量类型（引用类型） ：非标量类型不直接存储数据，而是存储数据在内存中的引用或指针。这一特性影响了它们在代码中的比较、操作和交互方式。JavaScript 中常见的非标量类型有对象、数组