1. 生命周期
组件从创建到消亡经历的一系列过程被称为组件的生命周期;
生命周期里的函数也被称作钩子函数;
定义组件的时候重写钩子函数可以做特定的工作
3.生命周期流程
- 第一次页面渲染
ReactDOM.render()
-
- constructor(): 创建对象初始化 state
-
- componentWillMount() : 组件即将挂载
-
- render() : 组件挂载
-
- componentDidMount() : 组件已经挂载
- 更新:
this.setState = {}
-
- componentWillUpdate() : 将要更新回调
-
- render() : 更新(重新渲染)
-
- componentDidUpdate() : 已经更新回调
- 移除组件
ReactDOM.unmountComponentAtNode(containerDom)
-
- componentWillUnmount() : 组件将要被移除回调
4. 重要的钩子函数
- render(): 初始化渲染或更新渲染调用
- componentDidMount(): 开启监听, 发送 ajax 请求
- componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
- componentWillReceiveProps(): 接受父组件改变后的props需要重新渲染组件时用
import React, { Component } from 'react';
import { unmountComponentAtNode } from 'react-dom';
class Life extends Component{
constructor(){
super(...arguments)
this.state = {
opacity: 1
}
}
// 页面渲染完成执行
componentDidMount() {
this.timer = setInterval(()=>{
let {opacity} = this.state;
opacity -= 0.1
if(opacity<=0) opacity = 1;
this.setState({opacity})
}, 200)
}
// 点击按钮执行
handClick = ()=>{
unmountComponentAtNode(document.getElementById('root'))
}
// 组件销毁
componentWillUnmount(){
clearInterval(this.timer)
}
render(){
const {opacity} = this.state
return(
<div>
<h2 style={{opacity}}> react 太难了 </h2>
<button onClick={this.handClick}> 不活了 </button>
</div>
)
}
}
class App extends Component {
render() {
return (
<div>
<Life/>
</div>
);
}
}
export default App;