react 生命周期

生命周期 无状态组件没有生命周期钩子函数
实例期
constructor(){}
存在期
componentWillMount(){}组件将要加载
componentDidMount(){}组件加载完成
componentWillUpdate(){}组件将要更新
componentDidUpdate(){}组件完成更新
shouldComponentUpdate(){}组件可以更新
componentWillReceiveProps(){}组件将要接受props参数
render(){}
销毁期
componentWillUnmount(){}销毁组件

组件初始化生命周期的执行过程
constructor
componentWillMount
render
componentDidMount

组件内部状态（state）被改变生命周期的执行过程
shouldComponentUpdate(){}
componentWillUpdate(){}
render(){}
componentWillUpdate(){}

组件外部状态（props）被改变生命周期的执行过程
componentWillReceiveProps(){}
shouldComponentUpdate(){}
componentWillUpdate(){}
render(){}
componentWillUpdate(){}

是否允许更新组件 必须有返回值，返回布尔，如果没有声明该钩子，默认返回true
shouldComponentUpdate(nextProps,nextState){
if(nextState.lists.length===this.state.lists.length){
console.log('component will not rerender');
return false;
}
return true;
}

事件
合成 ，原生
this.setState({
//修改的值，回调函数
},()=>{
console.log(this.state.lists);
})
console.log(this.state.lists);

通过es6箭头函数，解决this指向不正确
clickHandler=()=>{ }
this.clickHandler=this.clickHandler.bind(this)
onClick={()=>{this.clickHandler}}
onClick={this.clickHandler.bind(this)}