生命周期简介
class App extends React.Component {
//构造函数
constructor(props) {
super(props)
this.state = {
data: 'old'
}
console.log('constructor')
}
//组件将要加载
componentWillMount() {
console.log('componentWillMount')
}
// 组件加载完成
componentDidMount() {
console.log('componentDidMount')
}
// 将要接受父组件传来的props
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
// 子组件属否应该更新
shouldComponentUpdate() {
console.log('shouldComponentUpdate')
return true
}
// 组件将要更新
componentWillUpdate() {
console.log('componentWillUpdate')
}
// 组件更新完成
componentDidUpdate() {
console.log('componentDidUpdate')
}
// 组件即将销毁
componentWillUnmount() {
console.log('componentWillUnmount')
}
//处理点击事件
handleClick() {
this.setState({
data: 'new'
})
}
//渲染
render() {
console.log('render')
return (
<div>
App
<button onClick={() => this.handleClick()}>更新组件</button>
</div>
)
}
}
生命周期执行顺序
生命周期节点:
- Mounting:挂载阶段
- Updating:运行时阶段
- Unmounting:卸载阶段
- Error Handling:错误阶段
初始化过程:
- constructor
- componentWillMount
- render
- componentDidMount
更新组件(改变state):
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
更新组件(改变props):
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
组件卸载:
- componentWillUnmount