react 16 性能提升 总结
1. 减少子组件渲染
当 父组件 state 内的某个值(eg:value) 不变时 子组件菜 render
shouldComponentUpdate(nextProps, nextState){
// 当父组件传递到子组件的值不同时 子组件才渲染
return nextProps.value !== this.props.value;
}
2. 函数作用域绑定 卸载 constructor 内
// 只用绑定一次作用域 降低性能消耗 可以 避免无谓的渲染
constructor(props){
super(props);
this.clickEvent = this.clickEvent.bind(this);
}
3. setState 是异步操作 写成异步匿名函数 可以把多次 数据修改渲染 结合成一次来做
this.setState((prevState)=>({
array1 : [...prevState, str1,str2,str3],
string : 'this is string'
}));
4. 虚拟DOM
5. 同层比对