1.在constructor方法中:做方法的bind(this)
<input handleInputChange={this.handleInputChange.bind(this)} …/>
优化:
constructor(props) {
super(props);
…
this.handleInputChange = this.handleInputChange.bind(this);
}
2.this.setState赋值优化
this.setState({
list:[],
value:“dd”
})
优化:使用es6箭头函数
this.setState(()=>({
list:[],
value:“dd”
}));
3.render中有些js代码提取出来作为方法
<ul>
{this.getTodoItem()}
</ul>
getTodoItem() {
return this.state.list.map((item, index) => {
//不要将index当key值,删除时 index会变,影响重绘性能
return (
<TodoItem key={item}
content={item}
index={index}
itemDelete={this.handleItemDelete}></TodoItem>
)
})
}
4.使用生命周期函数
shouldComponentUpdate函数,返回true则会去更新,false则不会去更新,可以在这个函数中做一些判断,当父组件重绘时,自组件是否要重绘
shouldComponentUpdate(nextProps,nextState)
{
if(nextProps.data!=this.props.data){
return true;
}
return false;
}
5.将组件拆分成 ui组件和容器组件
ui组件只有render方法时,可以定义成无状态组件
6.redux 状态管理,react视图渲染层
7.PureComponent 实现了shouldComponentUpdate函数,可以优化重绘,组件数据更新时才重绘
注意:使用PureComponent时,最好使用immmutable管理数据,不然会遇到坑