高效能迷你React框架 anu1.2 釋出，支援React16的三大特性

司徒正美發表於2017-12-16
React框架

anu已經有兩個月沒有釋出了，經過1.1.5-pre, 1.1.5-pre2, 1.1.5-pre3, 1.1.5-pre4, 1.1.5-pre5, 1.1.5-pre6, 最終放棄了1.1.5, 改成1.2. 因為內部變動非常多，受控元件與非受控元件那塊完全重寫，只差一個case沒有跑通（這部分的測試程式碼有2000多行）。支援React1.6 的三大特徵，元件支援返回陣列，傳送門與錯誤邊界。

下面是新支援的React16特性

  1. ReactDOM.render的第一個引數可以是陣列，字串，數字，undefined, null, true, false。
  2. React元件的render方法可以返回陣列，字串，數字，undefined, null, true, false.
  3. 對於undefined, null, true, false， React15是生成一個佔位用的註釋節點（nodeType為8），現在什麼也不生成，完全靠演算法實現對齊。
  4. 相鄰的數字與字任串會合併成一個文字節點，比如說<div>xxx{111}yyy</div>在React15中，div裡面有3個文字節點，兩個分界用的註釋點，現在只有一個文字節點，其nodeValue為xxx111yyy，用於真實DOM的減少，效能大幅提升。
  5. setState/forceUpdate的回撥函式以前總在更新週期後才執行，現在提前到每個元件的componentDidMount/Update後執行。
  6. 生命週期順序改變，先A.componentWillMount->B.componentWillUnmount->A.compountDidMount.
  7. createPortal的事件冒泡是基於虛擬DOM進行冒泡的
  8. 跑通錯誤邊界的1900多行的測試，這裡的規則非常多，有空才詳細介紹。有了它，React16成為對錯誤處理最完善的框架。
  9. 虛擬DOM的結構發生變化，每個節點都有return, child, sibling等描述自己位置的屬性。
    -return 指向父節點，類似於瀏覽器的parentNode, 取代之前的_hostParent
    -child 指向第一個子節點，類似於瀏覽器的firstChild
    -sibling 指向下一個節點，類擬於瀏覽器的nextSibling
  10. componentDidUpdate現在只保留兩個引數，lastProps與lastState

其他變化與完善

  1. React.options新增了大量鉤子，埋點於vnode與元件的各個生命週期之中。
  2. 重構findDOMNode,遇到註釋節點返回null
  3. 重寫受控元件（基於事件繫結）與非受控元件（基於屬性監控）。
  4. 模仿React16，使用stateNode屬性代替舊有的_hostNode與_instance。
  5. React.Children與flattenChilden底層依賴的方法由_flattenChildren改為operateChildren，讓其更具通用性，
    flattenChilden更名為fiberizeChildren，產出一個帶連結串列結構的陣列。
  6. 新的架構：元素虛擬DOM與元件虛擬DOM都有自己的更新物件，簡化匹配演算法
  7. 簡化Refs模組
  8. 修復更新虛擬DOM時，namespaceURI丟失的BUG
  9. 升級SSR版本
  10. 升級lib下的ReactTestUtils
  11. 測試case多達524個。

使用

npm i anujs

或者使用架手架 https://github.com/Levan-Du/a…

npm i -g anu-cli

webpack.config中如何代替原來用React編寫的專案

resolve: {
   alias: {
      `react`: `anujs`,
      `react-dom`: `anujs`,
        // 若要相容 IE 請使用以下配置
        // `react`: `qreact/dist/ReactIE`,
        // `react-dom`: `qreact/dist/ReactIE`,
    
        // 如果引用了 prop-types 或 create-react-class
        // 需要新增如下別名
        `prop-types`: `qreact/lib/ReactPropTypes`,
        `create-react-class`: `qreact/lib/createClass`
        //如果你在移動端用到了onTouchTap事件
        `react-tap-event-plugin`: `anujs/lib/injectTapEventPlugin`,  
   }
},

歡迎大家為anujs加星星與試用！！！

https://github.com/RubyLouvre…

相關文章