React组件生命周期

React组件在生命周期里面大概有两种情况，一种是初次渲染，一种是状态更新导致再次渲染。咱们从组件生命周期的每一步可进行的操作的角度来了解一下。

初次渲染

1. 构造函数，指定This，初始状态，绑定函数（constructor）

       constructor(props){
                //指定This
		super(props)  
               //设置初始化状态
		this.state={
			value:'',
			focus:false
			}
               //为组件上的函数绑定this
		this.handleChange = this.handleChange.bind(this);
	}复制代码

构造函数在组件初次渲染的时候只运行一次，构造函数里面进行的操作大概有上述代码的三种操作。

2.组件安装（componentWillMount）

void componentWillMount()复制代码

在组件挂载之前调用一次。在这个函数里面你可以调用setState方法设置组件state，然后经过render函数渲染可以得到state被设置之后的效果。

3.组件生成DOM，必须JSX规则（render）

render(){
		return(
			<div className="FilterableProductTable">
			   <SearchBar value={this.state.value} handleChange={this.handleChange} handleFocus={this.handleFocus} handleOnblur={ this.handleOnblur}/>
			   <ProductTable data={this.props.JsonData} focus={this.state.focus} value={this.state.value} handleSelect={this.handleSelect}/>
			</div>
		);
	}复制代码

这个 render 方法必须要返回一个 JSX 元素。
必须要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的.在这里render函数只调用一次

4.查找DOM或者请求数据（componentDidMount）

void componentDidMount()复制代码

在第一次渲染后调用，此时组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 

如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)

组件的二次渲染

导致组件进行二次渲染的原因一般有三种

父组件的props发生更新 调用this.forceUpdate,（调用 forceUpdate() 会导致组件跳 shouldComponentUpdate() ，直接调用 render()。 ）调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）

1.父组件的props发生更新

void componentWillReceiveProps(nextProps)复制代码

props是父组件传递给子组件的。当子组件接受到nextProps时，不管这个props与原来的是否相同都会执行该方法。

bool shouldComponentUpdate(nextProps, nextState)复制代码

shouldComponentUpdate方法接收一个新的props和state，函数返回一个bool类型数据决定是否更新组件。如果返回false，则不进行更新。如果返回true，则进入下一环节。通常情况下为了优化，我们需要对新的props以及state和原来的数据作对比，如果发生变化。一般用immutable ，判断如下

import React, { Component } from 'react';
import { is, fromJS } from 'immutable';
shouldComponentUpdate(nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps))|| !is(fromJS(this.state),fromJS(nextState))
  }复制代码

当组件决定继续更新时，会进入componentWillUpdate方法

void componentWillUpdate(nextProps, nextState)复制代码

之后执行render函数更新DOM

ReactElement render()复制代码

执行完render函数之后执行componentDidUpdata,

void componentDidUpdate()复制代码

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

当组件需要被卸载的时候，调用 componentWillUnmount 方法

void componentWillUnmount()复制代码

一般在componentDidMount里面注册的事件需要在这里删除。

2.调用this.forceUpdate更新（重复componentWillUpdate方法之后的操作）

当组件调用forceUpdata方法更新时，会进入componentWillUpdate方法。直接跳过shouldComponentUpdta

void componentWillUpdate(nextProps, nextState)复制代码

之后执行render函数更新DOM

ReactElement render()复制代码

执行完render函数之后执行componentDidUpdata,

void componentDidUpdate()复制代码

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

当组件需要被卸载的时候，调用 componentWillUnmount 方法

void componentWillUnmount()复制代码

一般在componentDidMount里面注册的事件需要在这里删除。

3.调用this.setState方法更新组件state,触发组件更新

调用this.setState()方法更新组件state，首先会触发shouldComponentUpdata(nextProps,nextState)

在方法判断过后，决定是否更新。更新的操作和调用this.forceUpdate更新的操作是一样的。

下面给大家一张组件的生命周期的图，这张图是我根据自己的理解以及日常操作用到的情况画出来的。欢迎大家提出自己的见解，如有不正确的地方欢迎大家提出批评以及修改意见。谢谢。

转载于:https://juejin.im/post/5afe32cd6fb9a07ab5092213