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