-
组件的三个生命周期状态:
Mount：插入真实 DOM
Update：被重新渲染
Unmount：被移出真实 DOM
React 为每个状态都提供了两种勾子(hook)函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用
这里说钩子函数特别形象，将任务从任务队列中勾出来
* componentWillMount()
* componentDidMount() : 已插入真实DOM, 在render之后才会执行
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()
- 生命周期流程:
1).第一次初始化渲染显示: render()
1.constructor(): 创建对象初始化state
2.componentWillMount() : 将要插入回调
3.render() : 用于插入虚拟DOM回调
4.componentDidMount() : 已经插入回调
2).每次更新state: this.setSate()
1.componentWillUpdate() : 将要更新回调
2.render() : 更新(重新渲染)
3.componentDidUpdate() : 已经更新回调
3).删除组件
1.ReactDOM.unmountComponentAtNode(document.getElementById('example')) : 移除组件
2.componentWillUnmount() : 组件将要被移除回调
-
notice
一般会在componentDidMount()中: 开启监听, 发送ajax请求
可以在componentWillUnmount()做一些收尾工作: 停止监听
生命周期还有一个方法(后面需要时讲): componentWillReceiveProps
组件生命周期.png
例子:
class LifeCycle extends React.Component {
constructor(props) {
super(props);
console.log('constructor(): 创建组件对象');
this.state = {
date: new Date().toLocaleString()
};
}
componentWillMount() {
console.log('componentWillMount(): 将要初始挂载');
}
componentDidMount() {
console.log('componentDidMount(): 已经初始挂载');
this.intervalId = setInterval(
() => {
this.setState({date: new Date().toLocaleString()});
},
1000
);
}
componentWillUpdate() {
console.log('componentWillUpdate(): 将要进行state更新');
}
componentDidUpdate() {
console.log('componentDidUpdate(): 已经更新');
}
componentWillUnmount() {
console.log('componentWillUnmount(): 将要被移除');
clearInterval(this.intervalId);
}
removeComp() {
ReactDOM.unmountComponentAtNode(document.getElementById('example'));
}
render() {
console.log('render(): 渲染内部虚拟DOM');
return (
<div>
<h2>{this.props.name}, 当前时间: {this.state.date}</h2>
<button onClick={this.removeComp}>移除组件</button>
</div>
);
}
}
ReactDOM.render(<LifeCycle name="JACK"/>, document.getElementById('example'));
自定义组件:
功能描述: 让指定的文本做显示/隐藏的动画
class AnimateMsg extends React.Component {
constructor(props) {
super(props)
this.state = {
opacity: 1.0
}
}
componentDidMount() {
this.intervalId = setInterval(function () {
var opacity = this.state.opacity;
opacity -= 0.05;
if (opacity < 0.05) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
}
componentWillUnmount() {
clearInterval(this.intervalId)
}
render () {
return (
<p style={{opacity: this.state.opacity}}>{this.props.msg}</p>
);
}
}
AnimateMsg.propTypes = {
msg: React.PropTypes.string.isRequired,
}
ReactDOM.render(<AnimateMsg msg="www.atguigu.com"/>, document.getElementById('example'));
