https://amatsuzero.github.io/LastStand/tags/%E5%88%97%E8%A1%A8%E5%92%8Ckey/Recent content in 列表和key on Last StandHugozh-cnTue, 11 Feb 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/react/react-008/Tue, 17 Dec 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/react/react-008/<p>当我们在 React 要渲染一个列表时，如果没有在每一个被渲染的元件加上 key 这个 prop，就会跳出 <code>Warning: Each child in a list should have a unique “key” prop.</code> 这个错误讯息。直到开发者把 <code>key</code> 加上后，这个警告讯息才会消失。为什么要加上 key? 以及 key 有什么原则需要遵守? 这是在开发 React 时需要有的重要概念，也是面试经常会问的基础题。</p> <h2 id="为什么需要-key">为什么需要 key？</h2> <p>key 就像一个独特身份，让 React 可以去分辨哪些子元件被新增、 移除，或是修改。 (编按：若要进一步说明此概念，推荐在面试时画下 Dan Abramov 的这个系列推文<a href="https://twitter.com/dan_abramov/status/1415279090446204929">例子</a>)</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/react/react-008/image-01.jpeg"></p> <p>从上面的例子可以看到，当今天红黄蓝三个圈，变成红蓝黄；这会有两个可能性。可能性一第二个圈跟第三个圈的位置互换；可能性二是位置没互换，但第二个圈变蓝色、第三个圈变黄色。如果没有一个独特辨识的机制，我们会没办法知道，究竟是哪一个可能性。</p> <p>如果没办法有效辨识，将可能出现 bug。举例来说，假如今天的圈圈是有状态的，例如里面有勾选方块，然后第个二圈有被勾选。假如今天换颜色是因为第二个圈被交换到第三个位置，这时表示新一次的渲染时，第三个圈要是被勾选的。不过假如我们没有一个辨识机制，要是 React 误以为换颜色不是因为换位置，而是单纯的第二个圈换颜色，那么将会渲染出仍是第二个圈是被勾选的；那么这就会是一个 bug。</p> <p>然而，有了 key 这个辨识机制，React 就会知道在新的一次渲染时，原本的状态应该被保留在列表中的哪一个元件中。因此，React 之所以需要 key，正是因为 key 可以让 React 知道，哪些子元件被新增、 移除，或是修改。</p> <p>除此之外，看到下面这段 React 官方文件的例子 (编按：面试时也推荐直接举这例子)。原本有个列表，我们在最上方新增一个 <code>&lt;li&gt;Connecticut&lt;/li&gt;</code> ，如果没有 key，对 React 来说将会是，Duke 变成 Connecticut、Villanova 变成 Duke，而最后新增一个 Villanova。换句话说，整个列表都改变了，所以 React 会打掉旧的，重建一个新的列表。当列表变大时，就会很消耗效能。</p>