React 组件生命周期-概述
学习目标： 能够说出组件的生命周期一共几个阶段
组件的生命周期是指组件从被创建到挂在到页面中运行，在到组件不用时卸载组件
注意：只有类组件才有生命周期，函数组件没有生命周期(类组件需要实例化，函数组件不需要)
生命周期钩子函数 - 挂载时
| 钩子函数 | 触发时间 | 作用 |
|---|---|---|
| constructor | 组件创建时最先执行（组件初始化时只执行一次） | 1. 初始化 state 2.创建 Ref 3.使用 bind 解决 this 指向问题 |
| render | 组件每次渲染都会触发 | 渲染 UI（不能在 render 里面调用 setState） |
| componentDidMount | 组件挂载后（DOM 渲染完成）执行，初始化时执行一次 | 1.发送网络请求 2.DOM 操作 |
执行顺序:
constructor -> render -> componentDidMount
实例:
import React from 'react'class App extends React.Component {state = {count: 0,}constructor() {super()console.log('constructor')}componentDidMount() {console.log('componentDidMount')}add = () => {this.setState({count: this.state.count + 1,})}render() {console.log('render')return (<div>this is render<button onClick={this.add}>{this.state.count}</button></div>)}
}
export default App
生命周期钩子函数 - 更新时
学习目标： 能够说出组件更新阶段的钩子函数以及执行时机
| 钩子函数 | 触发时间 | 作用 |
|---|---|---|
| render | 每次组件渲染都会触发 | 渲染 UI(与挂载阶段是同一个 render) |
| componentDidUpdate | 组价更新后(DOM 渲染完) | DOM 操作，可以获取更新后的 DOM 内容，**不要直接调用 setState |
| ** | ||
| 实例 |
import React from 'react'class App extends React.Component {state = {count: 0,}constructor() {super()console.log('constructor')}componentDidMount() {console.log('componentDidMount')}componentDidUpdate() {console.log('componentDidUpdate')}add = () => {this.setState({count: this.state.count + 1,})}render() {console.log('render')return (<div>this is render<button onClick={this.add}>{this.state.count}</button></div>)}
}
export default App
生命周期钩子函数 - 卸载时
学习目标： 能够说出组件卸载（组件销毁）阶段的钩子函数以及执行时机
| 钩子函数 | 触发时间 | 作用 |
|---|---|---|
| componentwillUnmount | ||
| 实例 |
import React from 'react'
class Test extends React.Component {//如果要用到数据需要去影响识图，就写入state//如果不需要影响识图，就定义为普通实例属性times = nullcomponentDidMount() {this.times = setInterval(() => {console.log('定时器已开启')}, 1000)}componentWillUnmount() {console.log('componentWillUnmount')// 清楚定时器clearInterval(this.times)}render() {return <div>this is Test</div>}
}
class App extends React.Component {state = {flag: true,}constructor() {super()console.log('constructor')}componentDidMount() {console.log('componentDidMount')}componentDidUpdate() {console.log('componentDidUpdate')}add = () => {this.setState({flag: !this.state.flag,})}render() {console.log('render')return (<div>{this.state.flag ? <Test /> : null}<button onClick={this.add}>click</button></div>)}
}
export default App
