组件的生命周期
- 组件的三个生命周期状态:
- Mount:插入真实 DOM
- Update:被重新渲染
- Unmount:被移出真实 DOM
- React 为每个状态都提供了两种勾子(hook)函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用
- componentWillMount()
- componentDidMount() : 已插入真实DOM, 在render之后才会执行
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
- 生命周期流程:
- 第一次初始化渲染显示: render()
- constructor(): 创建对象初始化state
- componentWillMount() : 将要插入回调
- render() : 用于插入虚拟DOM回调
- componentDidMount() : 已经插入回调
- 每次更新state: this.setSate()
- componentWillUpdate() : 将要更新回调
- render() : 更新(重新渲染)
- componentDidUpdate() : 已经更新回调
- 删除组件
- ReactDOM.unmountComponentAtNode(document.getElementById('example')) : 移除组件
- componentWillUnmount() : 组件将要被移除回调
- 注意:
- 一般会在componentDidMount()中: 开启监听, 发送ajax请求
- 可以在componentWillUnmount()做一些收尾工作: 停止监听
- 生命周期还有一个方法(后面需要时讲): componentWillReceiveProps
class LifeCycle extends React.Component{
constructor(props){
super(props);
this.state = {
person: {
username: 'kobe',
age: 39
}
}
console.log('constructor(), 生成实例对象');
}
// 组件将要被挂载
componentWillMount(){
// console.log(this)// 实例对象;
console.log('componentWillMount() 组件将要被挂载');
// 发送ajax请求, 开启监听
setTimeout(function () {
this.setState({
person: {
username: 'wade',
age: 36
}
});
}.bind(this), 2000)
setTimeout(() => {
this.setState({
person: {
username: 'anverson',
age: 42
}
});
}, 3000);
}
// 组件已经挂载完毕
componentDidMount(){
console.log('componentDidMount() 组件已经挂载完毕');
setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('example'));
}, 4000);
this.intervalId = setInterval(() => {
console.log('setInterval()');
}, 1000)
}
// 组件将要被更新
componentWillUpdate(){
console.log('componentWillUpdate() 组件将要被更新');
}
// 组件更新完毕
componentDidUpdate(){
console.log('componentDidUpdate() 组件更新完毕');
}
// 组件将要被卸载
componentWillUnmount(){
console.log('componentWillUnmount() 组件将要被卸载');
// 收尾工作,关掉定时器
clearInterval(this.intervalId);
}
render(){
console.log('render()');
let {person} = this.state;
return (
<div>
<p>姓名: {person.username}----年龄:{person.age}</p>
</div>
)
}
}
ReactDOM.render(<LifeCycle />, document.getElementById('example'));
网友评论