React是什么？

以前的react只是一个UI引擎，现在则是一整套前后端通吃的 Web App 解决方案，react本身是一个view层的实现，有如下三个特点：

1.声明式设计：React采用声明范式，可以轻松描述应用。

2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活：React可以与已知的库或框架很好地配合。

用我自己的理解来说，react就是一个写好的组件对象，通过获取react的实例来构建组件，然后一堆堆的组件拼成一个应用，就像俄罗斯方块一样。

React的生命周期

我就不阐述jsx语法了，现在写react基本都是用的es6语法然后babel转义成es5，这里我想说的是，react提供的组件写法，其实和你平时自己构建对象是一样的，react构建了一个组件基础对象Component，我们通过继承这个对象来构建react组件

实际上生命周期这里涉及的都是围绕render方法的，组件加载前啦，加载完成啦，要不要更新啦，更新后啦，都是为了告诉render要不要更新dom。

首先我们先讨论下生命周期这一点，这个是很重要的，生命周期函数有这么几个

1.constructor

2.componentWillMount

3.componentWillReceiveProps(nextProps)

4.shouldComponentUpdate(nextProps, nextState)

5.componentWillUpdate(nextProps, nextState)

6.componentDidUpdate，componentDidMount componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。

7.componentWillUnmount 这个就很简单了，组件移除之前会调用。这里一般会移除一下componentDidMount监听的事件

这里我们一个个来解释一下各个方法的意义以及开发时常见用法：

constructor：严格来说这个并不属于react 生命周期的一环，constructor属于es6构建对象中的方法，它会在对象示例生成的时候执行，把它放上来是因为react对象的构造器方法传入了props，我们在构造react组件的时候可能会根据传入的props来动态生成state，这也是react组件第一个执行的方法。这里写的最多的其实是重新绑定this的方法。。。

componentWillMount：组件将要被加载前，个人经验这里一般会写一些对页面ui没有影响的加载运算，绑定一些监听事件啥的。

componentWillReceiveProps：这个是在组件已经加载过了，在父组件再次调用render的时候就会执行的，注意，并不是父组件传入的props变动才会执行，只要父组件render方法执行了，就会执行这个子组件的componentWillReceiveProps方法。

shouldComponentUpdate(nextProps, nextState)：这一方法主要的作用是优化，由名字可以看出来，组件是否需要更新，该函数传入两个参数，新的props和新的state，可以通过自定义对比来决定当前组件是否要再次执行render，默认返回为true，这里性能优化才需要写的，每次在你调用了setState方法就会执行，在应用变得复杂之后遇到性能瓶颈的时候可以根据需求去做进一步优化，一般是不需要理会。

componentWillUpdate(nextProps, nextState)：shouldComponentUpdate返回true或者调用forceUpdate之后，这个方法就会被调用了。

componentDidMount：与这个对应的方法是componentWillMount，willMount发生在即将调用render前，这个就是发生在调用了render后，这里常见的用法是会写一些异步请求并且根据返回的数据改变当前组件的UI。

componentDidUpdate：与其对应的是componentWillUpdate方法，在组件被更新之后会调用

常见问题

Q：假如我的组件异步之后调用setState，而在这异步得到结果之前我就卸载了当前组件，提示正在对一个已卸载的Component使用setState怎么办

A：直接上方法，最简单的就是参考f8app源码的做法，异步设置state的组件内部定义一个类似isMounted方法，然后在要调用setState的时候 this.isMounted && this.setState

Tip

定义组件的时候尽量将参数props化，可以设置一些defaultProps

待更新