Performance Improvement(2018)2018-03-15 15:37

这篇文章内容可能已经过时

React: Performance Improvement

主要是 重渲染 相关

Recursing On Children

React 会 diff 修改前和修改后的 DOM,  因此如果修改 child dom 的时候修改最后一个性能会好得多

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>  //new
  <li>Duke</li>
  <li>Villanova</li>
</ul>

如果在尾部添加一个 child dom,  那么前面几个 dom 都相同,  不用渲染 如果在头部添加一个 child dom,  那么可能所有的 dom 都要重新 render

Keys

为了解决性能问题,   keys 是非常重要的

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

这样 React 就知道了 2014 那个是新的一个 dom 一般用 id 设置为 key 的值

Re-Thinking

1. Component 切换,  性能很差,  如果切换前后的功能类似,  考虑改成同一个 Component 2.  Keys 必须是唯一的,  可预测的,  别放随机值

Powered by Remix
|
Designed by szhshp
|
Copyright © szhshp 2022