中文文档
首先要推荐一下React中文文档，无意中在github上发现的，对英语不是很好的学习者来说，无疑是最大的福音，感叹开源的强大之余，更要感谢那些参与翻译的贡献者！
概述
了解React组件的生命周期，能更好的理解React的工作过程，而所谓的生命周期，就是我们定义的React组件，渲染到浏览器的DOM树中，从第一次的渲染，到渲染完成后，经过用户的操作，还能产生一些变化，最后从DOM树种移除。在这些过程中，React会执行一些特定的函数，而我们就可以对这些函数进行实现，让我们使用React开发的组件，在合适的时间做合适的事情！
生命周期的的三个过程
- 装载(mount)
- 更新(update)
- 卸载(unMount)
装载
装载：组件第一次渲染到浏览器DOM树的过程
组件第一次渲染的过程中，会调用contructor,componentWillMount,render,componentDidMount这四个函数
1. constructor
通常，我们将constructor称呼为 构造函数、构造方法、构造器 等，尤其是在面向对象的语言的编程中，我们会认为，我们要创建的对象或组件就是我们调用了constructor后的返回值，这是一个认知误区。
编程语言的设计者之所以要设计出一个constructor，是想在对象创建之后，在使用对象之前，对其做一些初始化操作，而这些操作是自动完成的！
在React中，我们实现constructor,主要用来初始化state和绑定成员函数的this环境
2. render
在进行React开发组件时，render时最重要的函数，也是我们必须要实现的函数
render函数的作用就在于为React返回一个JSX的描述结构，然后由React将这个结构渲染到浏览器的DOM树中。
在render函数中，不要调用setState
3. componentWillMount
总觉得componentWillMount是一个无用的函数，它在constructor之后，在render之前执行，由于没有执行render,所以react并不会执行任何渲染操作，也不会引发任何重绘机制，所在如果想在render之前做一些操作，我们完全可以放到constructor中去
4. componentDidMount
componentDidMount是在渲染完成之后去执行的！我们经常会遇到这样的需求，有一个产品列表，用户通常会要求，在页面加载完成后，自动查询数据，然后由页面展示出来！也就是说，在组件渲染完成之后，我们需要执行一次AJAX操作，从服务器端请求数据，然后显示到页面中。这里的AJAX操作，就可以在componentDidMount来实现！
接下来我们通过一个官方文档中的范例看一下 这些函数的用法，当然在下面的范例中，只对constructor、render、componentDidMount进行讨论，componentWillMount就不在细说了
范例说明：创建一个时钟组件，在页面中显示时分秒，并且实时更新
import React from 'react'
class Clock extends React.Component{
constructor(props){
super(props);
this.state={
date: new Date()
}
}
componentDidMount(){
setInterval(()=>{
this.setState({date:new Date()});
},1000);
}
render(){
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
export default Clock;
执行流程
首先，组件的constructor中，初始化了state,设置date属性为当前时间，接下来，react调用Clock组件中的render函数，获取JSX结构，进行渲染，当渲染完成后，调用componentDidMount，在componentDidMount中，执行一个定时执行的异步函数，即每个1秒，都会重新设置state中的date变量的值，当state发生了变化，就引发了React组件生命周期的update过程！
更新
当我们打开一个由React开发出来的网页，第一眼看到的页面内容就是由React组件装载过程完成后的结果。接下来，作为一个用户，可能会输入一些东西，可能会用鼠标点击一些东西，页面会有相应的反馈，这个过程叫做交互，而用户在交互之后的内心感受，就是体验。可以说交互体验的过程，就是组件发生更新的过程。
从技术角度来看，用户的操作触发了事件，监听事件的处理函数修改了组件的内部状态，从而引发了组件的更新过程。
在React的生命周期中，更新过程我们通常关注shouldComponentUpdate、componentWillUpdate、componentDidUpdate 三个函数
1.shouldComponentUpdate
在React的所有生命周期函数中，只有render和shouldComponentUpdate这两个函数是需要有返回值的，shouldComponentUpdate需要返回一个布尔值，React根据这个返回值判断本次的更新是否继续，需不需要引发后续的渲染
2. componentWillUpdate和componentDidUpdate
当shouldComponentUpdate的返回值为true时，React会执行后续的渲染过程，首先执行componentWillUpdate，然后执行render过程，最后才会执行componentDidUpdate，组件之索引发了更新过程，一定是内部的state或props中的内容发生变化，render执行完成后，返回了一个JSX的结果，React根据这个结果渲染浏览器中的内容，渲染完成后，调用componentDidUpdate，而作为开发者的我们，有时会根据特殊需要，用一些其他UI库的代码，做些DOM操作，当componentDidUpdate执行的时候，浏览器的DOM已经渲染完毕了，我们就可以在componentDidUpdate中调用其他UI库的代码了，如jquery。
写到这里呢，应该将我认为比较重要的生命周期函数做了详细的阐述，有几个生命周期函数这里并没有提及，是因为他们需要一些特殊的场景，需要大量的详尽代码篇幅进行说明，我会在后续的文章中做阐述！
网友评论