效果如下图所示:
React 生命周期一般分为三个重要阶段,当然大家也要熟悉其中的几个重要方法,并了解他们之间的先后顺序,总结下来如下所示:
React官方文档:https://zh-hans.reactjs.org/
react的生命周期图谱https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
1> 第一次初始化渲染显示:ReactDOM.render()
.constructor():创建对象初始化state
.componentWillUnmount():将要插入回调
.render() :用于插入虚拟DOM 回调
.componentDidMount():已经插入回调
.组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染
2>每次更新state :this.setState()
.componmentWillUpdate():将要更新回调
.render() :更新(重新渲染)
.componmentDidUpdate():已经更新回调
3> 移除组件:ReactDOM.unmountComponentAtNode(containerDom)
.componentWillUnmount():组件将要被移除回调
.在此处完成组件的卸载和数据的销毁。
.clear你在组建中所有的setTimeout,setInterval
.移除所有组建中的监听 removeEventListener
.有时候我们会碰到这个warning
老规矩,不多BB 先上代码,大牛请绕道,跟我一样的小白请仔细读代码研究
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
class Life extends React.Component {
constructor(props) {
super(props)
//初始化状态
this.state = {
opacity: 1
}
}
//执行一次,该方法为组件的自身方法 初始化方法
componentDidMount(){
//启动循环定时器
this.IntervalId = setInterval(function(){
let {opacity} = this.state
opacity -= 0.1
if(opacity<=0){
opacity=1
}
this.setState({opacity})
}.bind(this),200)
}
// 一般前端有两种定时器 延时定时器 循环定时器 本次使用的是循环定时器
//也是调用一次,销毁定时器的方法
componentWillUnmount=()=>{
//清理定时器
clearInterval(this.IntervalId)
}
//卸载定时器
distroyComponment=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
render() {
const {opacity}=this.state
// 此时如果不清除定时器,容易造成内存泄露
console.log("定时器在执行了.......");
return (
<div>
<h2 style={{opacity: opacity}}>{this.props.msg}</h2>
<button onClick={this.distroyComponment}>不活了</button>
</div>
)
}
}
ReactDOM.render(
<Life msg="react太难了!"/>,
document.getElementById('root')
);
你懂的越多,你不懂的就越多,希望对同样学习的小伙伴有所帮助
本Demo来自B站尚硅谷 有需要学习的请移步:
https://www.bilibili.com/video/BV184411x7F9?p=15