react生命周期

记录react生命周期

相比vue，react的生命周期更让我觉得更容易懂。。。

 创建时（挂载阶段）

组件创建时。执行顺序为： constructor() ---> render() --->componentDidMount

上示例理解： 

class Parent extends React.Component {
  constructor(props) {
    super(props)
    console.warn('生命周期钩子函数： constructor')
  }
  componentDidMount() {
     console.warn('生命周期钩子函数： componentDidMount')
  }
  render() {
    console.warn('生命周期钩子函数： render')
    return (
      <div>
        <h1>打豆豆</h1>
      </div>
    )
  }
}
ReactDOM.render(<Parent></Parent>,document.getElementById('app'))

更新时（更新阶段）

执行时机：setState() 、接收到新的props 、forceUpdate()

执行顺序： render() ---> componentDidUpdate()

 

卸载时（卸载阶段）

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

 

class Parent extends React.Component {
  constructor(props) {
    super(props)
    console.warn('生命周期钩子函数： constructor')
    this.state = {
      count: 0
    }
  }
  clickChange = () => {
    this.setState({
      count: this.state.count +1
    })
  }
  render() {
    console.warn('生命周期钩子函数： render')
    return (
      <div>
        {this.state.count > 3 ? (<p>豆豆被打死了</p>) : (<Child count={this.state.count}/>)}
        {/* {<Child count={this.state.count}></Child>} */}
        <button onClick={this.clickChange}>+1</button>
      </div>
    )
  }
}
class Child extends React.Component {
  render() {
    return (
      <div>
        <h1 id="title">打豆豆：{this.props.count}</h1>
      </div>
    )
  }
  componentDidMount() {
    this.timerId = setInterval(() => {
      console.log('定时器正在执行')
    },500)
  }
  componentDidUpdate(preProps) {
    console.warn('生命周期钩子函数： componentDidUpdate')
    const testTitle = document.getElementById('title')
    console.log(testTitle.innerHTML)
    console.log(preProps,this.props)
    if (preProps.count !== this.props.count) {
      this.setState({})
    }
  }
  componentWillUnmount() {
    console.warn('生命周期钩子函数：componentWillUnmount')
    clearInterval(this.timerId)
  }
}

ReactDOM.render(<Parent></Parent>,document.getElementById('app'))