react 性能优化

1. 减少子组件渲染

当 父组件 state 内的某个值(eg:value) 不变时 子组件菜 render

shouldComponentUpdate(nextProps, nextState){

// 当父组件传递到子组件的值不同时 子组件才渲染

return nextProps.value !== this.props.value;

}

2.render里面尽量减少新建变量和函数
<Foo style={{ color:“red” }}

const fooStyle = { color: “red” }; //取保这个初始化只执行一次，不要放在render中，可以放在构造函数中

<Modal onCancel={()=>this.closeModal()}> =>

3. setState 是异步操作 写成异步匿名函数 可以把多次 数据修改渲染 结合成一次来做

this.setState((prevState)=>({

array1 : […prevState, str1,str2,str3],

string : ‘this is string’

}));