去年后面一段時間處于忙和亂的狀態(tài)，一直沒有騰出時間精力來寫完這個主題吕朵。最近在各種節(jié)奏捋順了之后猎醇，抽空這個專題的最后一章寫完，有始有終努溃。

　　回歸正題硫嘶，在上一篇《自建仿React引擎冊(三)》中，已經針對React.js里面其中一個重要的對象refs的作用以及實現(xiàn)進行了講解梧税，接下來音半，我準備講解state的作用及實現(xiàn)機制则拷。

　　首先，我們來看看state在React.js中的作用及特點曹鸠，具體看下圖。

image

　　state這個對象與UI的渲染緊密關聯(lián)斥铺，React.js的VDOM也是基礎state的不同狀態(tài)進行差量更新彻桃，當時我由于項目的時間緊，差量更新這一塊被我直接跳過了（后來惡補了一下晾蜘，發(fā)現(xiàn)React.js的差量更新技術的實現(xiàn)方式是另外一種方式邻眷，使用的是代理模式，覺得React的作者真是高手剔交，用代理模式實現(xiàn)起來更加的簡潔肆饶，以后找個專題再分享這種實現(xiàn)方式）。

　　根據(jù)上圖的思路岖常，我們開始著手完善state對象的開發(fā)驯镊。

1.創(chuàng)建state這個對象，state初始化就是一個空的字面直接量對象竭鞍，比較簡單卵贱。

config.state = {};

2.創(chuàng)建完對象后谜疤，我們還要提供setState的方法，setState這個方法可以簡單的拆分成三步，先更新state的值臀玄，再刷新UI界面，最后再執(zhí)行回調函數(shù)梅割，所以可以簡單的實現(xiàn)這個方法僚稿。

config.setState = function(state,fn) {

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

    this.forceUpdate(fn);//更新UI，此處應該先進行差量比對后再更新UI

};

3.要實現(xiàn)更新UI界面丐怯，我們還要提供forceUpdate的方法喷好，forceUpdate的方法干的事就是更新UI界面，所以此方法的具體實現(xiàn)如下响逢。

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的方法里，在該方法添加如下的代碼钦铺。

//創(chuàng)建初始化的state

if(vDom.getInitialState != undefined &&

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

      vDom.state = vDom.getInitialState();

}

　　經過簡單的4步改造后订雾，一個支持state的類React引擎就完成了。至此矛洞，一個簡易版的仿React.js的引擎已經實現(xiàn)洼哎，目前在生產環(huán)境上運行良好烫映。懶得去上傳源碼，發(fā)個之前生產環(huán)境的超鏈接噩峦，整個引擎的源碼需要的話可以找我锭沟。

　　React.js這個輕量級框架其實并不復雜，可快速上手识补，最重要的一點族淮，可以幫助前端開發(fā)人員建立良好的面向對象編程思想，后面附上幾張我自己整理的react.js技術要點圖凭涂。

image.gif

　　上圖簡要的回答了什么是單元祝辣？什么是模塊？什么是組件切油？這三個問題

image

image

image

　　理解好上面這6個對象的作用及特點以及組件的生命周期蝙斜，也就掌握了React.js的技術了。

　　《前端修煉手冊》這四篇文章記錄我個人在創(chuàng)造類React引擎的心路歷程澎胡，從構思到上線孕荠，自己一人花了兩周時間實現(xiàn)從0到1，最終成功的上線滤馍，對于一個當時剛入門的前端菜鳥來講岛琼，這是件很勵志的事。