react学习实战-简书--常见优化

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管理数据，不然会遇到坑