react 生命周期 钩子函数（笔记 1）

一. constructor(){}  ： 初始化 

         this 问题

      class App extends React.Component{
        state ={}

        constructor(props){
          super(props) //this.prosp=props
          console.log(this);
          //状态初始化
          this.state={age:0}
          //this 绑定
          this.go=this.go.bind(this)
        }

        go(){
          console.log(this);
        }

        render(){
          return(
            <div> App </div>
          )
        }
      }

1. constructor 中的 super( props ) 是用来给 props 实例化的 含义为 this.props=props

2. 状态初始化

this.state = { age:0 }

3. this 绑定

this.go = this.go.bind ( this ) 

二. componentWillMount(){}  ：第一次组件渲染之前（render执行之前）只会执行一次

      class App extends React.Component{
        
        constructor(props){
          console.log("----constructor");
           super(props) //this.prosp=props
        }

        //componentWillMount(){
        //  console.log("----componentWillMount");
        //}

        UNSAFE_componentWillMount(){
          console.log("----UNSAFE_componentWillMount");
        }

        render(){
          console.log("----render");
          return(
            <div> App </div>
          )
        }
      }

执行顺序如下：

componentWillMount 会在 render 之前执行 并且 componentWillMount  中已能获取当前组件的实例 （ state 、props ） 

不可以通过 this 的方式修改数据，但可以通过 setState( ) 的方法修改数据 并且 setState( ) 重新渲染不会触发 render () 

由于 componentWillMount(){} 使用时因异步请求问题不确定执行在哪一阶段 ( 之前、之后、之中 )  所以后改版为 UNSAFE_componentWillMount(){}

三. render(){}   渲染   ：第一次 挂载 和 更新

解析 jsx 构建虚拟 DOM => ( diff算法 ) => 真实DOM => 页面视图

class 组件必须实现的方法

render 是一个纯函数

注意：render 中 不要使用 this.setState() 重新渲染数据 会造成死循环( 导致内存溢出 )

四. componentDidMount(){}   :在第一次渲染之后立即执行

进行一些依赖于 DOM 的相关操作