React 进阶面试题, 如何实现 React 组件的记忆?它的原理是什么?
React 进阶面试题, 如何实现 React 组件的记忆?它的原理是什么?
QA
Step 1
Q:: 如何实现 React 组件的记忆？它的原理是什么？
A:: 在 React 中，组件的记忆（Memoization）通常是通过 React.memo 来实现的。React.memo 是一个高阶组件，它可以将一个组件包装为只有在输入 props 改变时才重新渲染的组件。其原理是基于浅层比较，即比较新旧 props 的引用是否发生了变化。如果 props 未变，则不会触发重新渲染，从而提升性能。使用 React.memo 需要注意的是，它只对函数组件有效，且默认只进行浅层对比，复杂对象可能需要手动定制对比逻辑。
Step 2
Q:: 在什么情况下使用 React.memo 是有益的？
A:: React.memo 在以下场景中特别有用：1. 组件在多次渲染之间 props 的变化不大时。2. 组件渲染过程比较耗时或复杂。3. 父组件频繁重新渲染，而子组件的 props 基本不变时。但需要注意，过度使用 React.memo 可能会引入不必要的复杂性，并可能由于额外的比较操作导致性能下降。因此，使用前应考虑组件渲染的实际开销。
Step 3
Q:: 在 React.memo 和 useMemo 之间有什么区别？
A:: React.memo 是用于优化整个组件的渲染，而 useMemo 是用于优化组件内的值或函数的计算。useMemo 用于缓存计算结果，以避免在每次渲染时都重新计算某个值。useMemo 适用于那些计算开销大且结果不频繁变化的场景，而 React.memo 则适用于优化组件级别的渲染频率。
Step 4
Q:: React.memo 是如何处理复杂的 props 对象的？
A:: 默认情况下，React.memo 通过浅比较来判断是否重新渲染组件。当 props 包含复杂对象时，浅比较只会比较对象引用，而不深入比较对象内部的每个属性。如果你需要在 React.memo 中处理复杂的 props 对象，可以传入自定义的比较函数。这个函数接受新旧 props 作为参数，并返回布尔值来决定是否需要重新渲染组件。
Step 5
Q:: 在性能优化时，React.memo 和 useCallback、useMemo 之间的关系是什么？
A:: 在性能优化中，React.memo、useCallback 和 useMemo 是常用的工具。React.memo 优化的是组件的渲染，useMemo 缓存的是计算值，而 useCallback 则是缓存回调函数。它们共同作用，减少不必要的渲染和计算。在使用时，可以结合 React.memo 和 useCallback，避免因函数的重新创建而导致子组件的重新渲染。