自建仿React引擎(四)

作者: 飙猪狂 | 来源:发表于2018-08-29 10:18 被阅读0次

　　去年后面一段时间处于忙和乱的状态，一直没有腾出时间精力来写完这个主题。最近在各种节奏捋顺了之后，抽空这个专题的最后一章写完，有始有终。

　　回归正题，在上一篇《自建仿React引擎册(三)》中，已经针对React.js里面其中一个重要的对象refs的作用以及实现进行了讲解，接下来，我准备讲解state的作用及实现机制。

　　首先，我们来看看state在React.js中的作用及特点，具体看下图。

image

　　state这个对象与UI的渲染紧密关联，React.js的VDOM也是基础state的不同状态进行差量更新，当时我由于项目的时间紧，差量更新这一块被我直接跳过了（后来恶补了一下，发现React.js的差量更新技术的实现方式是另外一种方式，使用的是代理模式，觉得React的作者真是高手，用代理模式实现起来更加的简洁，以后找个专题再分享这种实现方式）。

　　根据上图的思路，我们开始着手完善state对象的开发。

1.创建state这个对象，state初始化就是一个空的字面直接量对象，比较简单。

config.state = {};

2.创建完对象后，我们还要提供setState的方法，setState这个方法可以简单的拆分成三步，先更新state的值，再刷新UI界面，最后再执行回调函数，所以可以简单的实现这个方法。

config.setState = function(state,fn) {

    this.state = DeepCopy.copy(this.state, state);//差量替换

    this.forceUpdate(fn);//更新UI，此处应该先进行差量比对后再更新UI

};

3.要实现更新UI界面，我们还要提供forceUpdate的方法，forceUpdate的方法干的事就是更新UI界面，所以此方法的具体实现如下。

config.forceUpdate = function(fn) {

       this.refs = {};

       CurrentClass.setCurrent(this);

       CurrentClass.setCurrentState(this);

       var _node = this.render();

       CurrentClass.setCurrentState(null);

       this.realDOM.parentElement.replaceChild(_node, this.realDOM);

       this.realDOM = _node;

      setTimeout(function checkMount() {//检查结点是否正常加载，万恶的IE7\IE8

          if(config.realDOM.ownerDocument.body.contains(config.realDOM))           {

              fn && fn();

          } else {

              setTimeout(checkMount, 50);

          }

      }, 50);

};

4.我们还需要去添加getInitialState方法的调用时机，由于只运行一次，并且在render组件的时候可以使用默认值，所以这个方法的调用时机只有放在createElement的方法里，在该方法添加如下的代码。

//创建初始化的state

if(vDom.getInitialState != undefined &&

     typeof(vDom.getInitialState) === 'function') {

      vDom.state = vDom.getInitialState();

}

　　经过简单的4步改造后，一个支持state的类React引擎就完成了。至此，一个简易版的仿React.js的引擎已经实现，目前在生产环境上运行良好。懒得去上传源码，发个之前生产环境的超链接，整个引擎的源码可以访问这里（https://e.xcbank.com/Content/Scripts/ucsmy/core/engine.js）

　　React.js这个轻量级框架其实并不复杂，可快速上手，最重要的一点，可以帮助前端开发人员建立良好的面向对象编程思想，后面附上几张我自己整理的react.js技术要点图。