react - 生命周期

生命周期

componentWillMount 组件渲染前置性 componnetDidMount 组件渲染后执行

shouldComponentUpdate 返回true或false ， true代表允许改变，false代表不允许改变

componentWillUpdate 数据在改变之前执行 （state, props）

componentDidUpdate 数据改变后执行

componentWillReveiceProps props 发生改变时执行

componentWillUnmount 组件卸载前执行

import React from 'react'
/**
 * 
 * 先初始化props
    在设置state
    7个生命周期
 */
export default class ComponentList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  componentWillMount () {
    console.log('componnetWillMount')
  }
  componentDidMount () {
    console.log('componentDidMount')
  }
  shouldComponentUpdate () {
    return true
  }
  componentWillUpdate () {
    console.log('componnetWillUpdate')
  }
  componentDidUpdate () {
    console.log('componentDidUpdate')
  }
  componentWillReceiveProps () {
    // 父子交互
    console.log('componentWillReceiveProps')
  }
  componentWillUnmount () {
    console.log('componentWillUnmount')
  }
  increase = () => {
    // 执行shouldComponentUpdate componentWillUpdate componnetDidUpdate
    this.setState({
      count: this.state.count += 1
    })
  }
  clickChange = () => {
    this.props.handleParent('接收到了儿子触sdf发')
  }
  render() {
    const { count } = this.state
    return (
      <div>
        <h3>
          生命周期函数 { count } { this.props.title }
        </h3>
        <button onClick={ this.increase }>增加</button>
        <button onClick={ this.clickChange }>触发父方法</button>
      </div>
    )
  }
}

• 父元素

  handleP 是子 触发 父方法， 可以传参， 父元素需要传递方法给子组件

handleP = (data) => {
  console.log(data)
}
<ComponentLife handleParent={ this.handleP } title={ this.state.title }/>