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

问题描述 投票:0回答:1

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。或者是否有其他方法(例如渲染时间)来证明密钥有效?

javascript reactjs performance
1个回答
0
投票

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

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.