说起生命周期,最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期,再者是Vue 组件,那么今天要梳理的是React 组件的生命周期,可见对生命周期的理解和掌握对组件化开发时非常重要的。
概述
生命周期是什么?生命周期就是指一个对象的生老病死,而此处的对象就是React 组件,组件的生命周期也就是从其创建到销毁的过程,而且在整个过程中,React 组件暴露出来了一些函数,在特定的阶段进行回调,我们称之为生命周期回调函数或者钩子函数,这些回调函数主要是给开发暴露了操作的入口,在某个特定的阶段可以做一些需要的操作。
主要钩子函数
- constructor()
- componentWillMount()
- render()
- componentDidMount()
- componentWillUpdate()
- componentWillUnmount()
主要执行过程
1、第一次初始化渲染显示:ReactDOM.render()
- constructor() 创建对象 初始化 state
- componentWillMount() :将要插入的回调
- render(): 用于插入虚拟DOM 回调
- componentDidMount() 已经插入回调
2、每次更新state :this.setState()
- componentWillUpdate():将要更新回调
- render() : 更新 重新渲染
3、移除组件:ReactDOM.unmountComponentAtNode(containerDom)
- componentWillUnmount() 组件将要被移除回调
小案例练习
需求:
- 让指定的文本做显示/隐藏的动画
- 切换时间为2s
- 点击按钮从界面中移除组件界面
gif图我还不会弄,所以效果 把代码贴出来需要的自己跑起来看效果吧
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件生命周期</title>
</head>
<body>
<div id="example"></div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
/*
需求 :自定义组件
1、让指定的文本做显示/隐藏的动画
2、切换时间为2s
3、点击按钮从界面中移除组件界面
*/
class Life extends React.Component{
constructor(props){
super(props)
console.log('===constructor===')
//初始化化状态
this.state ={
opacity:1
}
this.distoryComponent = this.distoryComponent.bind(this)
}
distoryComponent(){
// 组件销毁也要把定时器销毁
ReactDOM.unmountComponentAtNode(document.getElementById('example'))
}
render(){
console.log('===render====')
const {opacity} = this.state
return (
<div>
<h2 style={{opacity}}>{this.props.msg}</h2>
<button onClick={this.distoryComponent}>不活了</button>
</div>
)
}
componentWillMount(){
console.log("===componentWillMount===")
}
componentDidMount(){
console.log("===componentDidMount===")
// 启动循环定时器
this.intervalId = setInterval(() => {
let {opacity} = this.state
opacity-=0.1
if(opacity<=0){
opacity=1
}
this.setState({opacity})
}, 200);
}
componentWillUpdate(){
console.log("===componentWillUpdate===")
}
componentWillUnmount(){
console.log('===componentWillUnmount===')
clearInterval(this.intervalId)
}
}
ReactDOM.render(<Life msg="react 太难了"/>,document.getElementById('example'))
</script>
</body>
</html>
总结及注意:
- 代码中打印了钩子函数的调用顺序可以自己打印看效果
- 在组件对象销毁之前,有些不会销毁的对象要手动销毁,不然很容易造成内存泄漏,如 定时器对象
- 需要公用的属性或者对象 ,可以定义在全局,定义在全局组件里 如代码中的定时器对象。