react 生命周期

1. 生命周期

组件从创建到消亡经历的一系列过程被称为组件的生命周期；

生命周期里的函数也被称作钩子函数；

定义组件的时候重写钩子函数可以做特定的工作

3.生命周期流程

• 第一次页面渲染 ReactDOM.render()
• 1. constructor(): 创建对象初始化 state
• 2. componentWillMount() : 组件即将挂载
• 3. render() : 组件挂载
• 4. componentDidMount() : 组件已经挂载
• 更新： this.setState = {}
• 1. componentWillUpdate() : 将要更新回调
• 2. render() : 更新(重新渲染)
• 3. componentDidUpdate() : 已经更新回调
• 移除组件 ReactDOM.unmountComponentAtNode(containerDom)
• 1. componentWillUnmount() : 组件将要被移除回调

4. 重要的钩子函数

1. render(): 初始化渲染或更新渲染调用
2. componentDidMount(): 开启监听, 发送 ajax 请求
3. componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
4. 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;