react学习(八)______组件的生命周期(挂载阶段)

生命周期是从一个组件或者实例开始的，在react中的组件，也是有组件的生命周期的。有生命周期，就代表有许多钩子函数。react中生命周期分为四个阶段，挂载阶段、更新阶段、卸载阶段、错误处理阶段。
react生命周期的图谱http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

挂载阶段

• 挂载阶段里面的钩子函数有四个
• render()是组件中必填的钩子函数，如果不填就会出现报错

constructor() 初始化状态的钩子函数

• 初始化函数，是挂载阶段的第一个钩子函数，一般使用构造函数来创建组件的并且组件需要一些状态来维持，则需要写这个钩子函数，这个钩子函数在组件渲染render()之前只会执行一次，并且里面需要写super()方法，更es6的构造函数里面的构造器属性相似但不是同一个东西。在这里面写状态state要写在super()后面。这里还有一个作用，官方的原话 为事件处理函数绑定实例说白了就是给组件绑定需要的方法函数都可以在这个钩子函数里面绑定。
  注意：
• constructor函数里面不能够使用setState()函数
• 组件内部如果需要state状态的话，就在constructor()函数里面this.state状态赋值就可以了
• 避免将 props 的值复制给 state！这是一个常见的错误：

constructor(props) {
 super(props);
 // 不要这样做
 this.state = { color: props.color };
}

import React, { Component } from 'react'

export default class LifeCycle extends Component {
    constructor(props){
        super(props)
        this.state = { counter: 0 }; //定义组件内部的一些状态
        this.handle = this.handle.bind(this) //为事件处理函数绑定实例
        console.log("我是constructor函数，挂载阶段我先执行")
    }
    handle = () =>{
        console.log(this)  //当前实例组件LifeCycle 
    }
    render() {
        return (
            

                life
            
        )
    }
}

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

• 如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。
• 当状态发生变化的时候，this.setState()的时候，此钩子函数同样也会执行。
• 如果需要对父组件传递过来的状态进行更改的时候最好在这个钩子函数里面更改，getDerivedStateFromProps有名字也可以知道，过去派生状态来自props属性，如果不需要更改的还就返回一个null，不管你需不需要更改，反正写了这个钩子函数就必须要有return，不然就会报错。

static getDerivedStateFromProps(){
        console.log("我是getDerivedStateFromProps函数，挂载阶段我第二执行2")
        return null
    }

render()函数

render()函数式在class组件里面必须要写的一个钩子函数。它是一个纯函数，当render()函数被调用的时候，它会计算props和state是否发生变化，并且返回以下的类型之一：

• React 元素。通常通过 JSX 创建。例如，
  会被 React 渲染为 DOM 节点， 会被 React 渲染为自定义组件，无论是

  还是 均为 React 元素。
• 数组或 fragments。 使得 render 方法可以返回多个元素。欲了解更多详细信息，请参阅 fragments 文档。
• Portals。可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息，请参阅有关 portals 的文档
• 字符串或数值类型。它们在 DOM 中会被渲染为文本节点
• 布尔类型或 null。什么都不渲染。（主要用于支持返回 test && 的模式，其中 test 为布尔类型。)

export default class LifeCycle extends Component {
 render() {
        console.log("我是render函数，挂载阶段我第三执行3")
        return (
            

                life
            
        )
    }
}

componentDidMount函数

• 如果你需要跟浏览器进行一个交互，例如：ajax数据请求、获取DOM节点、实例化操作等，请在这个函数里面执行。因为只有在这里才能够获取到真实的DOM节点。

import React, { Component } from 'react'

export default class LifeCycle extends Component {
    constructor(props){
        super(props)
        this.state = { counter: 0 }; //定义组件内部的一些状态
        this.handle = this.handle.bind(this) //为事件处理函数绑定实例
        console.log("我是constructor函数，挂载阶段我先执行1")
    }
    static getDerivedStateFromProps(){
        console.log("我是getDerivedStateFromProps函数，挂载阶段我第二执行2")
        return null
    }
    componentDidMount(){
        console.log("我是componentDidMount函数，挂载阶段我最后执行4")
        var life = document.getElementById("life")
        console.log(life) //life
        //ajax请求
        //插件的实例化
    }
    handle = () =>{
        console.log(this)
    }
    render() {
        console.log("我是render函数，挂载阶段我第三执行3")
        return (
            

                life
            
        )
    }
}