</span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic"><!-- new --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">div</span><spanclass="token tag"style="color:#00009f"></span><spanclass="token tag attr-name"style="color:#00a4db">class</span><spanclass="token tag attr-value punctuation attr-equals"style="color:#393A34">=</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag attr-value"style="color:#e3116c">bg-blue-100</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">HZFE</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">div</span><spanclass="token tag punctuation"style="color:#393A34">></span></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"class="copyButton_Ue-o clean-btn">Copy</button></div></div></li><li><p><strong>相同类型的元素</strong></p><p>如果元素是两个相同类型的 React DOM 元素时,React 会查看两者的属性,保留 DOM 节点,只更新改变的属性。如以下情况,React 只更新颜色样式。</p><divclass="codeBlockContainer_K1bP"><divclass="codeBlockContent_hGly html"><pretabindex="0"class="prism-code language-html codeBlock_23N8 thin-scrollbar"style="color:#393A34;background-color:#f6f8fa"><codeclass="codeBlockLines_39YC"><spanclass="token-line"style="color:#393A34"><spanclass="token comment"style="color:#999988;font-style:italic"><!-- old --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">button</span><spanclass="token tag"style="color:#00009f"></span><spanclass="token tag attr-name"style="color:#00a4db">class</span><spanclass="token tag attr-value punctuation attr-equals"style="color:#393A34">=</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag attr-value"style="color:#e3116c">bg-blue-100 text-center</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">HZFE</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">button</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"style="display:inline-block">
</span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic"><!-- new --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">button</span><spanclass="token tag"style="color:#00009f"></span><spanclass="token tag attr-name"style="color:#00a4db">class</span><spanclass="token tag attr-value punctuation attr-equals"style="color:#393A34">=</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag attr-value"style="color:#e3116c">bg-red-100 text-center</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">HZFE</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">button</span><spanclass="token tag punctuation"style="color:#393A34">></span></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"class="copyButton_Ue-o clean-btn">Copy</button></div></div></li></ol><p>在元素类型相同的情况下,比对完元素后,会递归元素的子元素。默认情况下,React 会同时迭代新老两个子元素列表。对于列表的更新,React 建议在列表项中标识 key 属性。避免以下低效场景:</p><divclass="codeBlockContainer_K1bP"><divclass="codeBlockContent_hGly html"><pretabindex="0"class="prism-code language-html codeBlock_23N8 thin-scrollbar"style="color:#393A34;background-color:#f6f8fa"><codeclass="codeBlockLines_39YC"><spanclass="token-line"style="color:#393A34"><spanclass="token comment"style="color:#999988;font-style:italic"><!-- bad --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic"><!-- React 不会意识到可以保留<li>HZFE</li>和<li>Front-End</li>子树的完整,而是重写每个元素 --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"style="display:inline-block">
</span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic"><!-- old --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">ul</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">HZFE</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">Front-End</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">ul</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic"><!-- new --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">ul</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">Back-End</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">HZFE</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">Front-End</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass
</span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic"><!-- old --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">ul</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag"style="color:#00009f"></span><spanclass="token tag attr-name"style="color:#00a4db">key</span><spanclass="token tag attr-value punctuation attr-equals"style="color:#393A34">=</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag attr-value"style="color:#e3116c">2016</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">HZFE</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag"style="color:#00009f"></span><spanclass="token tag attr-name"style="color:#00a4db">key</span><spanclass="token tag attr-value punctuation attr-equals"style="color:#393A34">=</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag attr-value"style="color:#e3116c">2017</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain">Front-End</span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"></</span><spanclass="token tag"style="color:#00009f">ul</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic"><!-- new --></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">ul</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="token plain"></span></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token tag punctuation"style="color:#393A34"><</span><spanclass="token tag"style="color:#00009f">li</span><spanclass="token tag"style="color:#00009f"></span><spanclass="token tag attr-name"style="color:#00a4db">key</span><spanclass="token tag attr-value punctuation attr-equals"style="color:#393A34">=</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag attr-value"style="color:#e3116c">2015</span><spanclass="token tag attr-value punctuation"style="color:#393A34">"</span><spanclass="token tag punctuation"style="color:#393A34">></span><spanclass="tokenp