Performance Improvement
文章目录

React: Performance Improvement

主要是重渲染相关

Recursing On Children

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

1
2
3
4
5
6
7
8
9
10
<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是非常重要的

1
2
3
4
5
6
7
8
9
10
<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必须是唯一的, 可预测的, 别放随机值