如何验证React列表渲染带key与不带key的性能差异？

问题背景 #

React文档提到，渲染无key的列表时，React会修改每个子元素而非保留原有子树结构，导致性能低效。但我写的示例代码里，无论加不加key，点击按钮后renderCount最终都是7，想知道有没有其他方法（比如渲染耗时）证明key的作用？

示例代码：

let renderCount = 0;
function City({ name }) {
    console.log('renderCount:', ++renderCount)
    return <li>{name}</li>
}

export default function Page() {
    const [cities, setCities] = useState(['New York', 'Chicago', 'San Francisco'])
    return (
        <>
            <button onClick={() => setCities(['Beijing', ...cities])}>Add new city</button>
            <div>
                {cities.map(city => (
                    <City key={city} name={city} />
                ))}
            </div>
        </>
    )
}

为什么当前示例看不到差异？ #

你当前的场景是在列表头部添加元素，而且City是纯展示的简单组件：

• 加key时：React能识别出新元素是新增的，但因为父组件Page重渲染时，函数组件默认会跟着重渲染（没做props对比），所以所有City都会执行一遍。
• 不加key时：React会把原有三个元素的name依次替换，再新增第四个，但同样因为City没做props校验，不管props变没变都会重渲染，导致renderCount数值一致。

验证key作用的有效方法 #

1. 用React.memo优化子组件，看渲染次数差异 #

给City组件套上React.memo，让它只在props变化时重渲染：

const City = React.memo(function City({ name }) {
    console.log('renderCount:', ++renderCount)
    return <li>{name}</li>
});

• 加key：点击按钮后，只有新增的Beijing对应的City会渲染，renderCount只加1（总次数：初始3 + 新增1 = 4）。
• 不加key：原有三个City都会因为props被修改而重渲染，再加上新增的一个，renderCount加4（总次数：3 + 4 = 7），差异立刻显现。

2. 用浏览器DevTools测渲染耗时 #

打开Chrome DevTools的Performance面板：

• 点击录制按钮，然后触发添加城市的操作，停止录制。
• 对比加key和不加key的情况：
  • React渲染阶段的总耗时（不加key会更长）。
  • DOM操作的次数（不加key会有大量属性修改，加key只有新增节点）。
    如果子组件逻辑复杂，这种耗时差异会非常明显。

3. 模拟复杂子组件场景 #

给子组件加些复杂计算或副作用，比如：

const ComplexCity = React.memo(function ComplexCity({ name }) {
    // 模拟Heavy计算
    const heavyCalc = () => {
        let res = 0;
        for (let i = 0; i < 1000000; i++) {
            res += i;
        }
        return res;
    };
    heavyCalc();
    
    console.log('ComplexCity rendered:', name);
    return <li>{name}</li>
});

加key时，只有新增组件会跑这个Heavy计算；不加key时，原有三个组件都会重复执行，页面会明显卡顿。

4. 直接看DOM更新行为 #

打开DevTools的Elements面板：

• 加key：新增的<li>出现在最前面，原有三个<li>的DOM节点完全没变化。
• 不加key：原有三个<li>的文本内容会被逐个替换，然后才新增第四个节点。

内容的提问来源于stack exchange，提问作者hh54188