是否可以验证带或不带key的React渲染列表时对性能的影响

Question

在 React 文档中，它提到当渲染没有键的列表时，React 会改变每个子项，而不是意识到它可以保持项目子树完整。这种低效率可能是一个问题。

我想知道如何验证这种影响，例如这是我现在正在写的演示：

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>
        </>
    )
}

无论我是否在城市元素上添加密钥，单击按钮后渲染计数值最终都会是7。或者是否有其他方法（例如渲染时间）来证明密钥有效？

Answer 1

使用键不会改变虚拟 DOM 的渲染数量，它会改变它计算的差异数量，然后必须将其刷新到真实 dom。

使用键，您的示例会导致反应在 dom 中插入一个

<li>

（在列表的前面，带有文本“Beijing”。如果没有键，react 将更新第一个 li 以包含文本“Beijing”而不是“ New York”，第 2 里包含文本“New York”而不是“Chicago”，第 3 里包含文本“Chicago”而不是“San Francisco”，并将在末尾插入带有文本的第 4 里《旧金山》

由于这种情况发生在代码返回后，您没有直接的方法来测量它，但尝试制作一个很长的列表（至少数千个），然后单击按钮，您可能会注意到差异。