react生命周期函数

和vue一样react也有在某一个时刻会对应执行的生命周期函数。

这里我将react的生命周期分为三大部分

初始化生命周期
compionentWillMount（组件即将被挂载到页面前执行）
render（组件渲染）
componentDidMount（组件挂载到页面上时执行）

props和state更新生命周期
componentWillReceiveProps（props独有的props变化时执行。子组件接收父组件参数，父组件render重新执行那么子组件中的这个生命周期就会执行！）
shouldConpomentUpdate（组件即将更新之前必须要返回一个Booleans当为false不更新视图且没有后面的生命周期，为true更新）
componentWillUpdate（组件更新之前执行并且在shouldComponentUpdate之后）
render
componentDidUpdate（组件更新完成执行）

卸载生命周期
componentWillUnmount（组件卸载时执行）

下面是学习过程的demo每个生命周期打印对应的生命周期的名字。生命周期对于react是非常重要的，要想学好react必须要了解它的生命周期。

父组件
import React, {Component} from 'react';
import Item from './components/item'

class App extends Component{
  constructor () {
    super()
    this.state = {
      inputValue: ''
    }
  }
  InputChange (event) {
    // this.setState({//这是没有用ref
    //   inputValue: event.target.value
    // })
    this.setState({//这是用ref获取dom元素
      inputValue: this.input.value
    },() => {
      console.log('setState函数执行完了才执行（页面更新口才获取dom要在这里）')
    })
  }


  //组件即将被挂载到页面前执行
  componentWillMount () {
    console.log('componentWillMount')
  }
  //组件渲染
  render () {
    console.log('render')
    return (
      <div className="App">
        React App
        <input 
          value={this.state.inputValue} 
          onChange={this.InputChange.bind(this)}
          ref={(n) => {//传入的n为这个input的dom元素
            this.input = n//这里的this指向这个input标签
          }}
        />
        {
          this.state.inputValue === '' ? <Item content={this.state.inputValue}></Item> : ''
        }
      </div>
    );
  }
  //组件挂载到页面上时执行
  componentDidMount () {
    console.log('componentDidMount')
  }
  //子组件拥有props才有的生命周期(父组件没有)
  componentWillReceiveProps () {
    console.log('componentWillReceiveProps')
  }
  //组件即将更新之前必须要返回一个Booleans当为false不更新视图且没有后面的生命周期，为true才更新
  shouldComponentUpdate () {
    console.log('shouldComponentUpdate')
    return true
  }
  //组件更新之前执行并且在shouldComponentUpdate之后
  componentWillUpdate () {
    console.log('componentWillUpdate')
  }
  //组件更新完成时候执行
  componentDidUpdate () {
    console.log('componentDidUpdate')
  }
  //卸载组件时执行
  componentWillUnmount () {
    console.log('componentWillUnmount')
  }
}

export default App;

 

子组件
import React,{Component} from 'react'

class Item extends Component {
  constructor (props) {
    super()
    this.state = {
      
    }
  }
  render () {
    return (
      <div className="Item">
        我是Item组件{this.props.content}
      </div>
    )
  }
  //子组件拥有props才有的生命周期(父组件没有)
  componentWillReceiveProps () {
    console.log('componentWillReceiveProps')
  }
  //卸载组件时执行
  componentWillUnmount () {
    console.log('componentWillUnmount')
  }
}

export default Item

果然前端三大框架中的任意一种学会了再去学其他的就知道该怎么入手。加油！！！