React基础优化

发表于 | 分类于

  首先声明写这篇文章的上下文：其实就是项目中碰到了很好奇….

list和key

  React的初学者一开始一定会有一个疑问：我在jsx里面用了循环列出来的标签为什么就一定要我加个key的属性呢，这玩意儿有啥用呢…….我也碰到了，也很好奇，于是跑到react官网看，在Reconciliation发现key属性是Virtual DOM更改后，前后比较的一个标识属性。如果没有key属性的话 

1
2
3
4
5
6
7
8
9
10
<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

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

类似于这样的更改情况，所有的子节点都会被重新生成，而不是保留后两个节点插入第一个节点。具体原理参考另一篇diff

  在这之外，官网上面的Lists and Keys这一章有说不推荐使用数组的index为key，一方面如果数组头有更改，就会出现重新生成所有节点的情况，另一方面，使用index为key会有风险。

  具体是啥风险，我好奇的点进文章看了一下…尼玛里面的例子在更新view的时候同时使用dom操作和react的setState方式…妈的吓我一跳，我写的东西里面一大堆用index来当作key的…不得不说发现这个问题的人，真的是个小天才。UI的更新操作react和原生dom操作混用…咋想的…

Functional Component

  functional component就是无状态组件，整个组件里面只有一个render()函数，不继承Component里面的生命周期，同时也不能操作State。就单纯的一个展示性的组件，类似于Button啊，ListItem啊之类的非常底部的组件使用functional component就ok了。

暂时不知道自己算没算用过的方法

  在官网的Optimizing Performance一章里面，开头讲的就是用webpack的product mode，这个东西的话，自己虽然用webpack自己搭了个react的环境，development mode和product mode也分开了，但毕竟只是个玩具。

  不过其实这些东西也自己玩玩就完事儿了，真的要用，直接create-react-app就完事了(现在项目就是，自己搭的环境发现不好使，项目做做一半换脚手架…..)。

看到但是没用过的方法及思路

  PureComponent 加上 Not Mutating Data，pureComponent会在shouldComponentUpdate的时候自动检查state和props有没有改变，如果没有改变就return false阻止视图更新。但是有个问题是，PureComponent只是一层浅比较，比较了新旧的内存地址，并没有比较内容。所以需要Not Mutating Data。

  那么，Not Mutating Data这玩意儿咋用呢，其实很简单….

1
2
3
4
5
6
this.setState(state => ({
    state: [...state.words, 'newValue'],
  }));
this.setState(state => ({
    state: {...state,key:'map'},
  }));

  在setState和setProps用es6的这个三个点的spread syntax可以避免(虽然之前并不知道这样写有啥好处，但是已经习惯这种写法了….顺便setState是异步的这点也搞得我脑壳痛)。

  总结一哈，其实简易的优化思路就俩，一个是打包工具的优化，另外就是减少component render的次数，其实就是在update 方法里面做文章，把可以不update的情况给拦截了就好了。
  再复杂的优化应该是搞两个react的devtool，查看生命周期的耗时，然后优化自己代码了…不过目前搞得这些东西似乎都用不到来着…..