组件的生命周期

意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等

组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程

生命周期的每一个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数

钩子函数的作用：为开发人员在不同阶段操作组件提供了时机

只有类组件才有生命周期

 

生命周期的三个阶段

1.创建时(挂载阶段)

　　执行时机：组件创建时(页面加载时)

　　执行顺序：

　　　　constructor() -> render() -> componentDidMount

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
组件生命周期
*/

class App extends React.Component {
constructor(props) {
super(props)

console.warn('生命周期钩子函数：constructor')
}

componentDidMount() {
console.warn('生命周期钩子函数：componentDidMount')
}

render() {
console.warn('生命周期钩子函数：render')

return (
<div>
<h1>统计豆豆被打的次数：</h1>
<button id='btn'>打豆豆</button>
</div>
)
}
}

ReactDOM.render(<App />, document.getElementById('root'))

钩子函数	触发时机	作用
constructor	创建组件时，最先执行	1.初始化state 2.为事件处理程序绑定this
render	每次组件渲染都会触发	渲染UI（注意：不能调用setState()）
componentDidMount	组件挂载（完成DOM渲染）后	1.发送网络请求 2.DOM操作

2.更新时(更新阶段)

　　执行时机：1.setState() 2.forceUpdate() 3.组件接收到新的props

　　说明：以上三者任意一种变化，组件就会重新渲染

　　执行顺序：

　　　　render() -> componentDidUpdate()

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
组件生命周期
*/

class App extends React.Component {
constructor(props) {
super(props)

//初始化state
this.state = {
count:0
}
}

//打豆豆
handleClick = () => {
// this.setState({
// count:this.state.count + 1
// })

//演示强制更新：
this.forceUpdate()
}

render() {
console.warn('生命周期钩子函数：render')
return (
<div>
<Counter count={this.state.count} />
<button onClick={this.handleClick}>打豆豆</button>
</div>
)
}
}

class Counter extends React.Component {
render() {
console.warn('子组件生命周期钩子函数：render')
return <h1>统计豆豆被打的次数：{this.props.count}</h1>
}

componentDidUpdate() {
console.warn('子组件生命周期钩子函数：componentDidUpdate')
}
}

ReactDOM.render(<App />, document.getElementById('root'))

 

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与挂载阶段是同一个render）
componentDidUpdate	组件更新（完成DOM渲染）后	1.发送网络请求 2.DOM操作 注意：如果要setState()必须放在一个if条件中

3.卸载时(卸载阶段)

　　执行时机：组件从页面中消失

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  组件生命周期
*/

class App extends React.Component {
  constructor(props) {
    super(props)

    //初始化state
    this.state = {
      count:0
    }
  }

  //打豆豆
  handleClick = () => {
    this.setState({
      count:this.state.count + 1
    })

    //演示强制更新：
    // this.forceUpdate()
  }

  render() {
    return (
      <div>
        {
          this.state.count > 3
            ? (<p>豆豆被打死了~</p>) : (<Counter count={this.state.count} />)
        }
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

class Counter extends React.Component {
  componentDidMount() {
    //开启定时器
    this.timerID = setInterval(() => {
      console.log('定时器正在执行~')
    }, 500);
  }

  render() {
    return <h1>统计豆豆被打的次数：{this.props.count}</h1>
  }

  componentWillUnmount() {
    console.warn('生命周期钩子函数：componentWillUnmount')

    //清理定时器
    clearInterval(this.timerID)
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

 

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面消失）	执行清理工作（比如：清理定时器等）