react 框架性能优化
react 框架性能优化
网页应用的性能由多方面因素决定，主要包括渲染性能优化，动画效果性能优化，以及代码打包的优化。本次主要介绍react 组件的性能优化，虽然react 已经提供了很好的渲染性能，但是由于应用由组件组成，要提供应用性能，必须提高组件性能。
前端性能监控利器
1.Google Performance工具
2.react 性能查看工具
- React Perf :查看 react加载组件时所耗费的时间的工具
可以在chorme中先安装React Perf扩展，然后在入口文件或者redux的store.js中加入相应的代码即可：
示例代码
React 组件性能优化
1. 单个react 组件的性能优化
1.1 render里面尽量减少新建变量和bind函数，传递参数时尽量减少传递参数的数量
<span style="color:red">思考</span>：点击按钮 使 num加1 实现方式
第一种是在构造函数中绑定this，会在 构造函数 实例化的时候执行一次
第二种是在render()函数里面绑定this，在每次render()的时候都会重新执行一遍
第三种就是使用箭头函数，每一次render()的时候，都会生成一个新的箭头函数，即使两个箭头函数的内容是一样的。
由于react 默认判断是否render ，是浅比较。如果state 或者 props 中的属性值是字符串或数字等简单类型，只要值相同，就会认为相同，不做render。但是如果是引用类型，浅比较只会比较两者引用，所以，如果新生成对象，也认为是不同
举个例子：
我们给组件Foo名为style的prop赋值；
<pre><Foo style={{ color:"red" }}</pre>
使用这种方法，每一次渲染都会被认为是一个style这个prop发生了变化，因为每一次都会产生一个对象给style。
那么我们应该如何改进，如果想要让react渲染的时候认为前后对象类型prop相同，则必须要保证prop指向同一个javascript对象，如下：
const fooStyle = { color: "red" };
//确保这个初始化只执行一次，不要放在render中，可以放在构造函数中
<Foo style={fooStyle} />
这个问题是我们在平时的编码中可以避免的。
1.2 定制shouldComponentUpdate函数
shouldComponentUpdate是决定react组件什么时候能够不重新渲染的函数，但是这个函数默认的实现方式就是简单的返回一个true。也就是说，默认每次更新的时候都要调用所用的生命周期函数，包括render函数，重新渲染。
为了不做不必要的渲染，需要使用shouldComponentUpdate 加以判断
最新的react中，react给我们提供了React.PureComponent
2.多个react 组件的性能优化
react组件在装载过程中，react通过render方法在内存中产生一个树形结构，树上的节点代表一个react组件或者原生的Dom元素，这个树形结构就是我们所谓的Vitural Dom，react根据这个来渲染产生浏览器的Dom树。
react在更新阶段对比原有的Vitural Dom和新生成的Vitural Dom，找出不同之处，在根据不同来渲染Dom树。
diff 树算法
- 节点类型不同
// A组件
<div>
<Todos />
</div>
// B组件
<span>
<Todos />
</span>
我们想把A组件更新成B组件，react在做比较的时候，发现最外面的根结点不一样，直接就废掉了之前的<div>节点，包括里面的子节点，这是一个巨大的浪费.
所以在开发过程中，我们应该尽量避免上面的情况，不要将包裹节点的类型随意改变。
- 两个节点类型一样
这里包括两种情况，一种是节点是Dom类型，还有一种react组件
对于dom类型，我们举个例子：
// A组件
<div style={{color: 'red',fontSize:15}} className="welcome">
Hello World!!!
</div>
// B组件
<div style={{color: 'green',fontSize:15}} className="react">
Good Bye!!!
</div>
上述A和B组件的区别是文字、className、style中的color发生改变，因为Dom元素没变，React只会修改他变化的部分。
针对react组件类型，渲染无非就是在走一遍组件实例的更新过程，最主要的就是定制shouldComponentUpdate
2.1 多个组件情况
例子一：
// A
<ul>
<TodoItem text="First" complete={false} />
<TodoItem text="Second" complete={false} />
</ul>
// B
<ul>
<TodoItem text="First" complete={false} />
<TodoItem text="Second" complete={false} />
<TodoItem text="Third" complete={false} />
</ul>
从A变到B，如果shouldComponentUpdate处理得当，我们只需要更新装载third的那一次就行。
例子二：
// A
<ul>
<TodoItem text="First" complete={false} />
<TodoItem text="Second" complete={false} />
</ul>
/ B
<ul>
<TodoItem text="Zero" complete={false} />
<TodoItem text="First" complete={false} />
<TodoItem text="Second" complete={false} />
</ul>
所以会依次将text为First的改为Zero，text为Second改为First，在最后再加上一个组件，text为Second。现存的两个的text的属性都被改变了，所以会依次渲染。
如果我们这里有1000个实例，那么就会发生1000次更新。
这里我们就要用到Key了
简单来说，其实这一个Key就是react组件的身份证号。
我们将上一个例子改成如下，就可以避免上面的问题了,react就能够知道其实B里面的第二个和第三个组件其实就是A中的第一个和第二个实例。
// A
<ul>
<TodoItem key={1} text="First" complete={false} />
<TodoItem key={2} text="Second" complete={false} />
</ul>
// B
<ul>
<TodoItem key={0} text="Zero" complete={false} />
<TodoItem key={1} text="First" complete={false} />
<TodoItem key={2} text="Second" complete={false} />
</ul>
不过现在，react也会提醒我们不要忘记使用key，如果没有加，在浏览器中会报错。
关于key的使用我们要注意的是，这个key值要稳定不变的，就如同身份证号之于我们是稳定不变的一样。
一个常见的错误就是，拿数组的的下标值去当做key，这个是很危险的，代码如下，我们一定要避免。
new-market 路由加载缓慢问题查找方向
一。由性能工具查看，发现出现在js 执行阶段，尚未在render 阶段。
具体表现：menu 数据增多或变复杂，页面渲染变慢
二。可能造成原因:
1.页面组件重复渲染问题
2.js多层嵌套问题,还是因为多次渲染导致的性能问题
3.加载埋点页面切图
效果前
报错一。
未知属性
解决方案--li 无自定义属性
image
三。解决方案
1.降低react 版本。使用perf 工具查看，排除组件重复渲染问题，由于perf 支持16以下，所以需要降低版本。
2.在排除组件渲染问题后，着手js 多层嵌套问题
四。整理项目中的性能优化点
1.组件方向
- 组件封装缺失，导致代码重复较多 主要优化方向
2.动画方向
3.其他
- 多余console.log
五。尚未掌握技能
1.动画性能优化
2.组件性能优化
3.打包性能优化
4.学习 react-router-dom
react 路由懒加载
