React-ReactElement解析

更新：   看React請看這篇的更新 http://www.cnblogs.com/sven36/p/6486860.html

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

前言：最近一直在研究React，看了陳屹先生所著的深刻React技術棧，以及本身使用了這麼長時間。對React應該說有比較深的理解了，正好前陣子也把兩本關於前端設計模式的書看完了，總感受有一種知識錯綜交匯，紛紛複復在腦海裏交纏的感受，真有不吐不快之感，正好也借這幾篇博客融會貫通所學的知識。

          目前手裏研究的是React15.3.1這個版本，React版本更新很快，相關API的名字位置等均可能發生改變，不過其ReactElement的生成，渲染，移除等流程是不會改變的，在下但願略盡綿力但願能以管窺豹，筆力，能力所限之處，還望海涵。

           首先，我想先說一說我對前端的見解，由於我以前一直在作.NET後端，剛開始的時候JS就是邊搜邊用，並無系統瞭解前端，直到一年前看了JS高級程序設計，我以爲纔算真正認識了JS，後來又陸陸續續看了不少前端的書，在之前的工做中由於前端的不少邏輯均可以在後臺實現，前端大部分工做都是渲染數據，操做DOM等；單獨JQuery徹底能夠搞定；

           固然JQuery是一個很是優秀的框架，不過隨着前端工程化，規模化的趨勢愈來愈強；而今，以Angular，React，Vue，Node爲表明這股前端的浪潮正在撲面而來，身爲一個技術人員，能經歷這麼一次浪潮的起伏是一次很可貴的機會；

          言歸正傳:那麼回到React自己，React的創新性和優勢在哪裏呢？我我的認爲是其用嵌套的JavaScript對象來表示DOM結構，即Virtual DOM並經過Virtual DOM的渲染過程把DOM操做放到內存裏，在這個過程還能夠實現DOM diff算法和DOM的生命週期管理；

          ReactElement解析

          先看一下若是按照日常的思路咱們操做DOM是如何操做的，基本上就是直接innerHtml賦值，appendChild(node)或者removeChild(node)；這樣寫的話效果很直接，不過也有一些缺點顯現出來：代碼沒有良好的結構，可擴展性，可維護性差；基本上就是一個DOM對象對應一個或多個DOM操做，很難複用函數；那麼React是如何解決這些問題的呢？

          就是用嵌套的JavaScript對象來表示DOM，那麼這個JavaScript對象是如何表示的咱們來調試一下：

           咱們先引入下載好的react.js和react-dom這兩個文件；咱們一般用的JSX語法只是一個語法糖，通過靜態編譯後就會編譯成上圖React.createElement的JS調用；這裏咱們直接調用該方法，看看React是如何運行的；

     

          咱們看的ReactElement其實就是一個JavaScript對象，其參數主要爲:$$typeof: REACT_ELEMENT_TYPE：這是ReactElement的惟一標識；

 key：用來調和DOM Diff的咱們先忽略它；props：咱們能夠看的咱們傳入的DOM屬性被分析成一個對象，成爲ReactElement的一個屬性；ref：是能夠獲取渲染後的DOM的引用，這裏咱們先忽略；

type：就是傳入的標籤名，咱們看的咱們傳入的是div（或者是React的包裹函數）；_store:是在特殊狀況下作一個備份，咱們先忽略它；

          單有一個對象可能還不太清晰，那咱們再嵌套一個對象看一下；

能夠看的，父元素的props對象的一個屬性children指向了剛新建的eleChildren元素；咱們用對象的形式表示出來就是：

{
      $$typeof: Symbol(react.element),//ReactElement的惟一標識
      _owner: null,
      key: undefined,//惟一標識
      props: {//屬性
              children: {
                    $$typeof: Symbol(react.element),
                    _owner: null,
                    key: undefined,
                    props: {
                          children: "look~",
                          id: "reactChild"
                    },
                    ref: undefined,
                    type: "p"
              },
              id: "text",
              onclick:"hello"//指向hello方法的指針
      },
      ref: undefined,//對DOM的引用
      type: "div"//標籤類型
      }

      這樣的話ReactElement的結構就很清楚了，React正是經過這種對DOM的抽象，再根據不一樣的ReactElement生產不一樣的組件Component，而後遞歸渲染；

      代碼我已上傳至GitHub你們能夠直接在本地調試：https://github.com/sven36/React-VirtualDom

      此外在ReactDOM.render()處打斷點跟進去就能夠慢慢分析其如何完成事件綁定，還有其生命週期管理是如何操做的，

這些坑先挖着，之後慢慢填吧~