媒介
React组件的生命周期能够分为挂载,衬着和卸载这几个阶段。
当衬着后的组件须要更新时,我们会从新去衬着组件,直至卸载。
因而,能够把React生命周期分红两类:
1.当组件在挂载或卸载时。
2.当组件吸收新的数据时,即组件更新时。
一.挂载或卸载历程
1.组件初始化
static defaultProps保证this.props有初始值
this.state初始值
componentWillMount会在render之前挪用,componentDidMount会在render以后挪用,离别代表了衬着前后的时刻,
都只实行一次。
render以后,我们在componentDidMount中实行setState,组件会再次render,不过在初始化历程就衬着了两次组件
,这并非一件功德,但实际情况是,有些场景不得不须要setState,比方盘算组件的位置或宽高级,就不得不让组件
先衬着,更新必要的信息后,再次衬着。
2.组件的卸载:
componentWillMount,我们常常会实行一些清算要领,如事宜接纳或是消灭定时器。
componentWillMount() {
this.setState({
a: this.state.a + 1 // 先实行willMount,a + 1,再实行render,componentDidMount
});
console.log('will' + this.state.a);
}
componentDidMount() {
console.log('did' + this.state.a);
}
render() {
console.log('render' + this.state.a);
return (
<div>
<div><button onClick={ this.add }>home</button></div>
<div>{ this.state.a }</div>
<div>{ this.props.maxLoops }</div>
<About2 id={ this.state.a } />
</div>
);
}
二.数据更新历程
1.数据更新历程:
更新历程指的是父组件向下通报props或组件本身实行setState要领时发作的一系列更新行动。
假如组件本身state更新了,那末会顺次实行shouldComponentUpdate,componentWillUpdate,render和componentDidUpdate。
shouldComponentUpdate是一个迥殊的要领,它接收须要更新的props和state,让开发者增添必要的前提推断,
让其在须要时更新,不须要时不更新。因而,当要领返回false的时刻,组件不再向下实行生命周期要领。
2.父节点props转变
当父节点this.state转变,传入子组件的this.props发作转变,组件会顺次挪用componentWillReceiveProps,
shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate.
子组件会从新衬着。
3.假如组件是由父组件更新props而更新的,那末在shouldComponentUpdate之前会实行componentWillReceiveProps要领,此要领能够作为React在props传入后,衬着之前setState时机,在此要领中setState是不会二次衬着的。
componentWillReceiveProps(nextProps) {
console.log('willreceive');
console.log(nextProps);
if (nextProps.id === 4) {
this.setState({
bb: 1000
})
}
}
shouldComponentUpdate(nextProps, nextState) {
console.log('should update');
if (nextState.bb === 16) {
return false;
}
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('will update');
}
componentDidUpdate(prevProps, prevState) {
console.log('did update');
}