最近参加了一些技术面试，其中不少聊到了React渲染优化的问题。这个话题很值得汇总一下，以便更系统的理解React的渲染机制和优化途径。
在React应用中，随着组件数量和复杂度的增加，渲染性能导致的问题可能会逐渐地凸显出来。主要的现象是页面出现卡顿，影响用户体验。下面我来介绍一下React中常见的渲染优化方法。

组件级别的优化方法

useMemo

useMemo是一个React Hook，用于缓存计算结果，避免在每次渲染时重复执行高开销的计算。
假设我们有一个计算结果的函数，它执行大量复杂的计算：

我之前遇到过一个设计师开的bug，当用户在一个列表里添加了一行记录时，界面上的 CheckBox 异常地执行了一个动画效果。接到这个bug时第一反应是看看 CheckBox 对应的布尔值有没有发生变化，确认没有之后，我觉得这需要调查一下控件CSS的实现逻辑了，所以这个bug就被我放在一边了，因为没有影响到数据，被认为是低优先级的问题。直到后来有机会去处理手上残留的bug，才再次尝试解决。

问题描述

我用一个例子去描述当时我遇到的问题。假设我们用一个列表去实现某个业务上的功能，列表的每一行最左面是个 CheckBox，右面有一些文本信息。列表还支持增加行，按一下按钮（下图中的 Add to top），列表的最上方会加上一行。界面像是下面这样（暂时忽略那个Reverse按钮）。