1. 渲染流程
image.png
2. 更新流程
image.png
3. 渲染优化
两棵树之间的比较更新算法复杂度为O(n3),n为树中元素的数量。开销太大，会影响react的效率，所以react对其进行了优化。将其复杂度优化为了O(n)，具体方法
- 只在同层间进行比较；
- 不同类型的节点，直接替换。
- 对比时发现节点类型不一致，则会从此节点开始直接卸载整棵子节点树然后替换为新元素；
- 当节点相同时，仅对比更新属性
- 如果是同类型的组件元素，react会更新该组件的props并调用componentWillReciveProps()和componnetWillUpdate()函数，然后调用render函数，然后diff算法比较
- 通过key来指定哪些节点不需要更新
当react比较循环显示的子元素时，是新旧两个节点同时遍历比较，当不同时，就会生成一个mutation
4. 代码优化
- shouldComponentUpdate(nextProps, nextState)
不会阻断第一次渲染，第二次开始，根据其返回值确定是否进行重新渲染。 - purComponent
会在内部对state和props进行比较，来决定是否重新渲染（shallowEqual）
3.memo
用于函数的优化
4.不要直接修改state的数据然后在state中赋值，这样的话如果组件中写了shouldComponent，或继承的是purComponent，页面将不会刷新。因为其对页面的优化是做了浅层比较，而这种写法导致friend的引用地址并没有变，所以页面并不会刷新
// 这样写是不对的，
this.state.friend.push({name:'李白'})
this.setState({
friend: this.state.friend
})
