react生命周期.md

生命周期

react生命周期.jpg

Mounting 挂载阶段 -->Updating 运行时阶段->Unmountinf ->卸载阶段--->Error Handleing 错误处理

• [基础流程]

  1、constructor
2、componentWillMount 挂载前,第一次渲染之前
3、render 挂载,正在进行第一次渲染
4、componentDidMount 挂载后，第一次渲染之后

• [状态更新触发：修改流程，当组件的状态数据发生改变(stateState)或者传递给组件的属性发生改变(重新调用组件传递不同的属性)，都会引发render重新渲染（差异渲染）]

1、shouldComponentUpdate (是否允许组件重新渲染)
2、componentWillUpdate (重新渲染之前)
3、render 第二次及以后重新渲染
4、componentDidUpdate （重新渲染之后）

• [属性更新触发，props发生改变]

  1、componetWillReceiveProps 在父组件把子组件的属性发生改变后

• [卸载触发]

  1、componentWillUnmount

解析流程code

import React from 'react'
import './App.css'


class App extends React.Component {
  // 这是第一个执行的
  static defaultProps = {}
  constructor(){
    super()
    console.log('第一次渲染=constructor...')
    this.state = { n: 1}
  }

  // async componentWillMount() {
  //   let result = await queryData()
  //   this.setState({
  //     n: result
  //   })
  // }
  // 可以拿到数据
  componentWillMount() {
    console.log('WILL-MOUNT')
    console.log(this.state.n)
    console.log(this.refs.dow)
  }

  render(){
    console.log('Render')
    return <div ref='dow'>{this.state.n}</div>
  }
  /* 可以操作dom
真实项目中在这个阶段控制状态信息的更改获取数据,如果在willMount直接修改数据，会把状态信息改变后，然后
render和di的，但是如果set-State是放在一个异步操作中完成，也是先执行redner和didMounted

真实项目中的数据绑定，一般是第一次组件渲染，我们都是绑定的默认属性，第二次才是服务器获取的数据 */
  componentDidMount(){
    console.log('Did-Mount')
    console.log(this.refs.dow)
    setInterval(() => {
      this.setState({n: this.state.n + 1})
    }, 2000);
  }

  // state状态发生改变后调用，一般为了性能优化
  shouldComponentUpdate(nextProps,nextState){
    // nextProps,nextState分别代表最新修改的属性和状态
    // 在shouldUpdate的钩子函数中获取到的值不是修改过的，而是上一次的
    console.log('shouldComponentUpdate,函数返回true就是允许')
    if(nextState.n>4){
      return false
    }else{
      return true
    }

  }

  componentWillUpdate(nextProps,nextState){
    // 这里面的获取的状态也是更新之前的
    console.log('组件更新之前...')
  }

  componentDidUpdate(){
    // 这里获取的状态是更新之后的
    console.log('组件更新之后')
  }
}
export default App