【React.js 18】React进阶-01

没看几天的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的工作机制：

虚拟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呢？

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()，因为会导致死循环。

【React.js 18】React进阶-01

React原理

虚拟DOM

生命周期

setState

推荐阅读更多精彩内容