没看几天的React，我居然就敢写进阶、写原理了，我一定是膨胀了...
React原理
这个标题起的有点大......
-
虚拟DOM
在前端开发的过程中，我们经常会做的一件事就是将变化的数据实时更新到UI上，这时就需要对DOM进行更新和重新渲染，而频繁的DOM操作通常是性能瓶颈产生的原因之一，有时候我们会遇到这样一种尴尬的情况：比如有一个列表数据，当用户执行刷新操作时，Ajax会重新从后台请求数据，即使新请求的数据和上次完全相同，DOM也会被全部更新一遍并进行重新渲染，这样就产生了不必要的性能开销。
React为此引入了虚拟DOM（Virtual DOM）机制：对于每一个组件，React会在内存中构建一个相对应的DOM树，基于React开发时所有的DOM构造都是通过虚拟DOM进行，每当组件的状态发生变化时，React都会重新构建整个DOM数据，然后将当前的整个DOM树和上一次的DOM树进行对比，得出DOM结构变化的部分(Patchs)，然后将这些Patchs 再更新到真实DOM中。整个过程都是在内存中进行，因此是非常高效的。借用一张图可以清晰的表示虚拟DOM的工作机制：
这里要注意，React只能平级的去对比树结构上的每个元素。
接下来我们看看React是如何创建虚拟DOM的呢：
本质上就是通过获取类型、配置、子元素来生成虚拟DOM节点，我们可以通过Babel来看看创建一个虚拟DOM节点是怎样的：
//这是我们通过JSX写出来的标签
<h2 data-id='test'>
<p>p node</p>
h2 node
</h2>
对应的，Babel把它转化成了：
React.createElement(
'h2', //type
{ 'data-id': 'test' }, //config
React.createElement( //children
'p',
null,
'p node'
),
'h2 node'
);
我们可以看到创建一个虚拟DOM节点的所需参数：类型、配置、子元素。
然后return了一个ReactElement，那么，什么是ReactElement呢？
最终我们可以获取这么一个对象，JSX就以这样一个对象递归的存在内存中，只要有数据发生变化，就会把新的数据和老的数据取出来做对比，从而获取
Diff，再去执行ReactMultiChild.js文件中的_updateChildren方法去执行Patchs更新到真实DOM中。ReactMultiChild.js文件中的_updateChildren方法代码太长了，这里就不贴了，有兴趣的可以自己去看看。
-
生命周期
关于React的生命周期，还是先贴图，方便理解：
Initial render步骤下，这些生命周期相信对React有基础的同学，也基本都了解了，作为初始渲染，其实并没有太多可以优化的地方，该执行的还是都得执行。所以对于优化，我们关注的还是另一个生命周期
shouldComponentUpdate()方法，通过定制它来优化我们的组件。我们的组件在更新渲染的时候，会调用
shouldComponentUpdate()方法，当其返回true的时候才能正常往下更新渲染，反之就不更新渲染。触发组件更新渲染的主要有三种情况：
1、
this.setState()状态变更会触发组件更新渲染2、组件外部发生变化，特别是用了
redux的connect方法的时候，父组件props发生变化时，就会调用componentWillReceiveProps()方法，从而触发往下的一系列更新。3、
this.forceUpdate()这个方法我们很少用，它直接调用了componentWillUpdate()方法，强制的更新。
来一个简单的例子：
import React ,{Component} from 'react'
class Demo extends Component {
constructor(props) {
super(props)
this.state={ num:1 }
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
this.setState({
num:this.state.num+1
})
}
shouldComponentUpdate(nextProps, nextState){
console.log('nextProps:',nextProps,'\n','nextState:',nextState);
return false
}
render(){
return(
<div>
<p>{this.state.num}</p>
<button onClick={this.handleClick}>click</button>
</div>
)
}
}
export default Demo
当shouldComponentUpdate()返回为false的时候，更新渲染自然被拒绝了。同时我们能够看到shouldComponentUpdate()自带了nextProps,nextState两个下次的状态和属性，是不是嗅到了一些可以优化的气息了？这里先留给大家思考，后续会再出文章专门讲优化。
-
setState
this.setState()算是很经常用的一个方法了吧，应该都不陌生了，setState会自动调用render()方法去重新渲染，所以这里有几点要注意：
1、不要写this.state.num=1这种写法，因为这种写法不会更新任何显示，是一种不符合规范的错误写法。
2、this.setState()是有队列机制的，简单的来说，就是异步执行的，并且你在一个方法中多次的去执行setState，它也只执行最终那一次的更新渲染，不会次次都更新渲染。
3、不要在render()执行this.setState()，因为会导致死循环。
