React的生命周期究竟是怎么一回事？

尽可能全面详细的整理一下React的生命周期中的知识点。

组件

组件是独立的封装的能够复用的一个小部件，它是React的核心思想之一。经过划分组件，能够将一个页面划分红独立的多个可复用的组件，各个组件经过嵌套、组合造成一个完整的页面。

在React中，组件基本由三个部分组成：属性（props）、状态（state）以及生命周期方法。能够将组件简单地看做一个“状态机”，根据不一样的state和props呈现不一样的UI，经过与用户的交互实现不一样的状态，而后从新渲染组件，UI能够跟随数据变化而变化。

建立组件

组件常分为两种：Class Component和Functional Component。

无状态组件

Functional Component也称为无状态组件，它多用于纯展现组件，这种组件只负责根据传入的props来渲染组件，而不涉及state状态管理。

在大部分React代码中，大多数组件被写成无状态的组件，经过简单组合能够构建成其余的组件等；这种经过多个简单而后合并成一个大应用的设计模式被提倡。

无状态组件能够经过函数形式或者ES6的箭头函数来建立：

// 函数
function HelloFunctional(props){
  return <div>hello {props.name}</div>;
}

// ES6箭头函数
const HelloFunctional = (props) => (<div>hello {props.name}</div>);

无状态组件有如下几个特色：

1. 代码可读性更好
2. 组件不会被实例化，渲染性能提高
3. 无生命周期方法
4. 只能输入props，一样的输入必定会有一样的输出

因此，在项目中若是不须要进行状态管理，应该尽可能写成无状态组件的形式。

有状态组件

如今主流的建立有状态组件的形式是经过ES6的Class来建立，取代React.createClass：

Class HelloClass extends React.Component{
  constructor(){
    this.state = {
      name:'axuebin'
    }
  }
  render(){
    return (<div>hello {this.state.name}</div>);
  }
}

这是最简洁的一个组件，它须要使用到内部状态state。

当组件须要使用内部状态时或者须要使用生命周期方法时就须要使用有状态组件。

组件的生命周期

React组件的生命周期能够分为挂载、渲染和卸载这几个阶段，当渲染后的组件更新后，会从新渲染组件，直到卸载。先分阶段来看看每一个阶段有哪些生命周期函数。

挂载阶段（Mounting）

属于这个阶段的生命周期函数有：

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()

constructor()

constructor() {
  super();
  this.state = {name: 'axuebin'};
  this.handleClick = this.handleClick.bind(this); 
}

这个阶段就是组件的初始化，constructor()能够理解为组件的构造函数，从组件的类class实例化一个组件实例。这个函数是组件造成时就被调用的，是生命周期中最早执行的。

在constructor()函数内，首先必须执行super()，不然this.props将是未定义，会引起异常。

而后，若是有必要，能够进行：

• state的初始化
• 方法的绑定

若是不须要这两步，能够直接省略constructor函数。

componentWillMount()

这个函数按照驼峰法的命名规则能够理解为“组件即将被挂载”，因此这个函数是组件首次渲染（render）前调用的。

在每次页面加载、刷新时，或者某个组件第一次展示时都会调用这个函数。一般地，咱们推荐使用constructor()来替代。

注意：在这个函数中，不能够调用setState来修改状态。

render()

render() {
  return(
    <div>hello {this.state.name} {this.props.age}</div>
  )
}

render()在生命周期中是必须的，是渲染组件用的。

当这个函数被调用时，须要检查this.props和this.state而且返回一个元素（有且只有一个元素），这个元素多是一个原生DOM元素，也有多是另外一个React组件。

能够在state或props状态为空时试着返回一个null或者false来声明不想渲染任何东西。

在这个函数中，不该该改变组件的状态，也就是不执行this.setState，须要保持render()函数的纯净。

在这个函数中，能够对props进行调用并组合，但不可修改。

componentDidMount()

componentDidMount() {
  this.setState({name:'xb'});
}

这个函数在组件加载渲染完成后当即调用，此时页面上已经渲染出真实的DOM了，能够在这个函数中访问到真实的DOM（能够经过this.refs来访问真实DOM）。

在这个阶段，还能够作一件事，能够修改state了！！！

并且，异步获取数据在这个阶段执行也是比较合理的，获取数据以后setState，而后从新渲染组件。

更新阶段（Updating）

属性或状态的改变会触发一次更新。当一个组件在被从新渲染时，这些方法将会被调用：

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()

componentWillReceiveProps()

已加载的组件在props发生变化时调用，若须要更新状态，可能须要对比this.props和nextProps而后在该方法中使用this.setState来处理状态的改变。

须要注意的是，有些状况下，即便props未改变也会触发该函数，因此必定要先比较this.props和nextProps再作操做。

该函数只监听props的改变，this.setState不会触发这个函数。

componentWillReceiveProps(nextProps){
  if (this.props.color !== nextProps.color){
    this.setState({});
  }
}

shouldComponentUpdate()

这个函数只返回true或false，表示组件是否须要更新（从新渲染）。

1. 返回true就是紧接着如下的生命周期函数；
2. 返回false表示组件不须要从新渲染，再也不执行任何生命周期函数（包括render）。

这个函数使用需谨慎，react官方文档中说道，在将来这个函数返回false可能仍然使得组件从新渲染。

componentWillUpdate()

这个函数看名字就和componentWillMount很像，它执行的阶段也很像。在接收到新的props或者state以后，这个函数就会在render前被调用。

一样的，在这个函数中不能使用this.setState()。若是须要更新状态，请在componentWillReceiveProps中调用this.setState()。

render()

又是一次的render。这和挂载阶段的render有什么区别呢？

在函数的性质上来讲，二者毫无区别，只不过是在生命周期的不一样阶段的调用。

• 前一个render是在组件第一次加载时调用的，也就是初次渲染，能够理解为mount；
• 后一个render是除去第一次以后调用的，也就是再渲染，re-render；

componentDidUpdate()

一样地，这个方法是在组件re-render以后调用的，该方法不会在初始化的时候调用。和componentDidMount同样，在这个函数中可使用this.refs获取真实DOM。

还能够修改state哦，不过会致使组件再次re-render。

卸载阶段（Unmounting）

该方法将会在 component 从DOM中移除时调用

• componentWillUnmount()

componentWillUnmount()

卸载阶段就很简单了，就这一个生命周期函数，在组件被卸载和销毁以前马上调用。

在这个函数中，应该处理任何须要的清理工做，好比销毁定时器、取消网络请求、清除以前建立的相关DOM节点等。

生命周期流程图

原文地址：http://axuebin.com/blog/2017/...