React学习第三天——生命周期

生命周期

注意：生命周期钩子函数通常指的是类组件独有的东西

常用的生命周期钩子函数

官网在介绍生命周期也分为了常用 和不常用 两大块进行介绍

常用：

• constructor 初始化操作
  同一个组件对象只会创建一次
  不能在挂载页面前，调用setState，为了避免问题，构造函数中严禁使用setState

  class App extends React.Component{
  constructor(){
  super()
  //在constructor中进行初始化操作
  this.state = {
  val: ''
  }
  }
  }
  export default App

• render
  render是整个类组件中必须书写的生命周期方法
  返回一个虚拟dom，会被挂载到虚拟dom树，最终渲染到真是dom
  render可能不止渲染一次，只要视图更新，render就会重新运行
  严禁使用setState，可能会导致无限递归

  import React from "react"
  class App extends React.Component{
  constructor(){
  super()
  // 主要做初始化操作，例如该组件的状态
  this.state = {
  val: ''
  }
  console.log('constructor');

  }
  handleClick = () => {
    this.setState({
      val: this.state.val + 1
    })
  }
  render(){
    /**
     * 会产生递归
     * this.setState({
     *    val: this.state.val + 1
     * })
     */
    console.log('render'); //执行多次
    return (
      <div>
        {this.state.val}
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }

  }
  export default App

• componentDidMount
  类似于vue中的mounted
  只执行一次
  可以使用setState
  通常情况，将网络请求，启动计时器等一开始需要的操作，书写咋该函数中

  componentDidMount(){
  console.log('componentDidMount');
  //接下来，发送Ajax亲求，或者绑定计时器等操作
  }

• componentWillUnmount
  通常在该函数中销毁组件依赖的资源，比如计时器

  componentWillUnmount(){
  //组件销毁时调用该生命周期钩子

  }