React生命周期

又是一个老生常谈的内容,从ES6起已经开始使用class的方式去创建组件,这种创建方式上的变化也带来了写法和方法上的改变,做一个总结

1.创建组件的差异

ES6之前采用React.createClass()的方式去创建组件,所有跟生命周期相关的方法都以一个json的都放到对应的小括号里,作为参数,作为初始值

var Hello = React.createClass({
    componentWillMount:function () {
        console.log("我将要被加载出来");
    },
   render:function () {
        console.log("渲染");
        return <div>我被渲染出来了</div>;
   },
  componentDidMount:function () {
        console.log("已经加载完成");
  }
})

ES6之后,JS也开始有了class,所以写法上就有了很大的变化

import React, { Component } from 'react';

class Counter extends Component {
    constructor(props) {
        super(props);
    }
    componentWillReceiveProps(nextProps) {
        console.log('enter componentWillReceiveProps ' + this.props.caption)
    }
    componentWillMount() {
        console.log('enter componentWillMount ' + this.props.caption);
    }
}

首先在第一行引入react包文件,Component相当于组件类的父类,只要创建组件就要继承于这个父类,而且第一个React即使没用上,也一定要写,否则编译不过,第一个写的是父类的构造函数,也就是说,因为写法上的不同,生命周期的函数,也发生了变化

2.装载过程 Mount

1.constructor
构造函数,当然创建的时候也可以不写,写构造函数两种情况

1.绑定this,在ES6中每个成员在执行时,this并不是跟对象自动绑定,所以为了方便使用,在构造函数就将这个对象和this绑定好
2.初始化state,因为是第一个执行的生命周期函数,所以在构造函数初始化state最合适,也方便在其他过程使用state

而且在构造函数的第一句,一定要写super(props);不写编译不通过.

2.getInitialState和getDefaultProps
getInitialState这个函数的作用会返回初始化组件的this.state,getDefaultProps的作用就是返回this.props,但是这两个方法是配合React.createClass这种创建使用的,也就是说ES6之后,这两个方法就不能使用了,如果非常倔强,就是要用,不影响编译,但是在控制台会有一个红色warning

警告

3.render
这个函数的地位毋庸置疑,非常重要,哪怕别的周期函数不写,这个也一定要写,因为父类对除render之外的函数都默认实现.render要对应的是一个纯函数,它返回一个JSX描述的结构,最终通过React来完成渲染工作.

4.componentWillMount和componentDidMount
componentWillMount是优先于render执行的,在渲染之前之前执行,如果想在这个函数写点什么的话,那些代码可以都移位到构造函数中去写,这个函数也可以认为是相对componentDidMount存在的,用处也大,就是将要装载这样一个状态.
componentDidMount这个函数是在render之后调用,但是当一个组件由多个子组件组成的时候,执行顺序会发生些许变化

执行顺序

三个组件的componentDidMount方法并没有在各自组件render方法之后执行,而是都最后一步统一执行,这是因为render只是返回一个结构的描述,最终是靠React来完成渲染工作,所以React完成三个组件的转载之后,才算完成整个装载,才会调用componentDidMount这个函数,所以都在最后一起调用.而且这个函数调用的时候能保证Dom树已经全部加载出来了,也可以在这个函数里使用Ajax进行网络请求,去做一些逻辑上的操作
整体下来装载过程的生命周期函数执行顺序
constructor-> componentWillMount -> render -> componentDidMount

3.更新过程 Update

第一个大过程是组件被装载到Dom上用户对组件的第一印象的过程,但是在程序执行的过程中,props和state可能随时会发生变化,所以在过程中会一直处于一个更新的过程.这个过程有五个周期函数

1.componentWillReceiveProps(newProps)
这个函数的作用是当父组件render被调用,对应的子组件也会发生更新过程,不管这个过程中父组件传给子组件的props有没有发生变化,都会触发子组件的componentWillReceiveProps,也就是这个方法实际上是在子组件被调用的,而且会把新的props传给子组件,newProps就是对应的参数.这个方法是props更新会触发,this.state不会触发调动这个方法.最简单的方式就是父组件有一个按钮,调用this.forceUpdate,强制让React组件重新绘制,类似初始化

// 父组件
<Son caption="First" initValue={20} />
<button onClick={() => this.forceUpdate()}></button>
// 子组件
componentWillReceiveProps(newProps) {
  console.log(newProps);
  console.log('componentWillReceiveProps ' + this.props.initValue)
}

只要触发重新绘制就能触发,方法不唯一

2.shouldComponentUpdate(nextProps, nextState)
render函数通过JSX告诉React需要渲染什么,shouldComponentUpdate的作用就是与之相反,告诉React哪些内容不需要渲染.这个函数也和render一样,需要一个返回值,但是这个返回值类型是bool,通过True和False告诉React在这次更新过程中,组件是够需要更新,重新渲染.灵活使用这个函数,可以大大的提高React的性能.

// 子组件
shouldComponentUpdate(newProps, newState) {
    return (newProps.caption !== this.props.caption) ||
           (newState.count !== this.state.count);
}

当子组件要渲染之前,会触发这个函数,会把当前新的props和新的state作为两参数传到函数里,当然如果直接返回false,无论怎么样都不会重新绘制了,所以可以根据值的变化进行选择性的绘制.而且在使用this.setState的时候,并不是第一时间更新组件组件上state相关的值,在执行shouldComponentUpdate的时候this.state还是原来的值,并没有发生变化,所以需要四个值都进行比较.

3.componentWillUpdate和componentDidUpdate
当上一步shouldComponentUpdate通过之后,会调用componentWillUpdate,render和componentDidUpdate,这两个函数也会把render加在中间,作用跟componentWillMount和componentDidMount差不多,就不在赘述了
更新过程的生命周期执行顺序大致如下
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

4.卸载过程 Unmount

这个周期下只涉及到1个函数componentWillUnmount,当React组件要从Dom树上移除的时候会触发这个函数,做组件的收尾工作.
如果在开始的时候使用componentDidMount创建了一些非React的方法创建的DOM元素,,就需要在卸载过程中,对这部分内容进行清除,防止造成不必要的内存问题

大将南征胆气豪，腰横秋水雁翎刀。
风吹鼍鼓山河动，电闪旌旗日月高。
天上麒麟原有种，穴中蝼蚁岂能逃。
太平待诏归来日，朕与先生解战袍