本文已参与「新人创作礼」活动，一起开启掘金创作之路
第一节：初体验
·组件从创建到死亡，会经过一些特定的阶段。
·React组件中包含一系列钩子函数{生命周期回调函数}，会在特定的时刻调用。
·我们在定义组件的时候，会在特定的声明周期回调函数中，做特定的工作。
class Life extends React.Component{
state = {time:1}
hidedata = ()=>{
//卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById("hello"));
}
//组件挂在后执行
componentDidMount(){
this.myinter = setInterval(()=>{
let {time} = this.state;
time = time-0.1;
if(time<=0){
time=1;
}
this.setState({time:time});
},200);
}
//组件即将卸载时执行
componentWillUnmount(){
clearInterval(this.myinter);
}
render(){
return (
<div>
<p style={{opacity:this.state.time,color:'red'}}>我爱编程，编程是我快乐！</p>
<input type="button" name="" value="点击消失" onClick={this.hidedata}/>
</div>
)
}
}
ReactDOM.render(<Life/>,document.getElementById("hello"));
第二节：生命周期（旧）
2.1 初始化阶段
由ReactDOM.render()触发，一般在这个钩子中做一些初始化的事情,如:开启定时器,发送网络请求,订阅消息等。
·constructor() 构造方法
·componentWillMount() 即将挂载
·render() 组件渲染
·componentDidMount() ==>常用 组件将要渲染
2.2 更新阶段
由组件内部的this.setState()或者父组件的render触发。
·shouldComponentUpdate() 组件应该更新
·componentWillUpdate() 组件将要更新
·render() ===>必须使用的一个
·componentDidUpdate() 组件将要更新
2.3 卸载组件
由ReactDOM.unmountComponentAtNode(卸载节点上的组件)触发，一般在这个钩子中做一些首位的事情,如:关闭定时器,取消订阅等
componentWillUnmount() ===>常用 组件将要卸载
案例：
class Count extends React.Component{
constructor(){
super();
this.state = {count:1}
console.log("count---constructor");
}
stop = () => {
//卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById("hello"))
console.log('卸载组件')
}
countdata = ()=>{
let {count} = this.state;
count++;
this.setState({count:count});
}
//组件将要挂载调用
componentWillMount(){
console.log("count---componentWillMount");
}
//组件挂载完成后执行
componentDidMount(){
console.log("count---componentDidMount");
}
//组件已更新完后调用
componentDidUpdate(){
console.log('count----componentDidUpdate');
}
//组件更新阶段 由this.setState或者组件的render触发
shouldComponentUpdate(){ //判断是否可以更新 true可以 false 不可以
console.log('count---shouldComponentUpdate');
return true;
}
componentWillUpdate(){//组件将要更新
console.log('count-----componentWillUpdate');
}
//卸载组件时候的钩子
componentWillUnmount(){
console.log('count----componentWillUnmount');
}
render(){
console.log("count---render");
let {count} = this.state;
return (
<div>
<p>数字为：{count}</p>
<button onClick = {this.countdata}>点击求和</button>
<button onClick={this.stop}>卸载组件</button>
<B name={count}/>
</div>
)
}
}
class B extends React.Component{
render(){
return (
<div>
B的内容{this.props.name}
</div>
);
}
//父组件进行了更新，子组件先执行这个
componentWillReceiveProps(){
console.log("B --- componentWillReceiveProps");
}
}
ReactDOM.render(<Count/>,document.getElementById("hello"));
第三节：生命周期（新）
参考网址：www.runoob.com/react/react…
3.1 初始化阶段
·constructor()
· getDerivedStateFromProps() 从Props获得派生状态 static 静态方法 state状态取决于props使用
·render()
·componentDidMount() ====>`常用` //在页面渲染完成，组件已挂载完成时调用。
****
3.2 更新阶段
·getDerivedStateFromProps() 从Props获得派生状态
· shouldComponentUpdate() 组件应该更新
·render()
·getSnapshotBeforeUpdate(beforeprops,beforestate) 在更新前获得快照 返回null
·componentDidUpdate()
3.3 *卸载组件
由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount() ===>
常用
一般在这个钩子中做一些收尾的事情,如:关闭定时器、取消订阅消息
**第四节：生命周期总结
1、重要的钩子
- render:初始化渲染或者更新渲染调用
- componentDidMount() :组件挂载之后调用，此时可以操作DOM，ajax请求，订阅信息等。
- componentWillUnmount(): 组件卸载后调用，做一些收尾工作,如:清理定时器,取消网络请求等。
2、即将废弃的钩子
-
componentWillMount
-
componentWillReceiveProps
-
componentWillUpdate
ps:现在使用会出现警告,之后版本可能需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用
推测React团队认为提高使用成本将会间接影响我们,让我们去适应新的钩子,所以加上这个
