高性能迷你React框架 anu1.2 發(fā)布，支持React16的三大特性

whidy 發(fā)布于2019-08-22 11:19 / 2029人閱讀

摘要：支持的三大特征，組件支持返回?cái)?shù)組，傳送門與錯(cuò)誤邊界。下面是新支持的特性的第一個(gè)參數(shù)可以是數(shù)組，字符串，數(shù)字，。有了它，成為對(duì)錯(cuò)誤處理最完善的框架。虛擬的結(jié)構(gòu)發(fā)生變化，每個(gè)節(jié)點(diǎn)都有等描述自己位置的屬性。

anu已經(jīng)有兩個(gè)月沒(méi)有發(fā)布了，經(jīng)過(guò)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. 因?yàn)閮?nèi)部變動(dòng)非常多，受控組件與非受控組件那塊完全重寫，只差一個(gè)case沒(méi)有跑通（這部分的測(cè)試代碼有2000多行）。支持React1.6?的三大特征，組件支持返回?cái)?shù)組，傳送門與錯(cuò)誤邊界。

下面是新支持的React16特性

ReactDOM.render的第一個(gè)參數(shù)可以是數(shù)組，字符串，數(shù)字，undefined, null, true, false。

React組件的render方法可以返回?cái)?shù)組，字符串，數(shù)字，undefined, null, true, false.

對(duì)于undefined, null, true, false， React15是生成一個(gè)占位用的注釋節(jié)點(diǎn)（nodeType為8），現(xiàn)在什么也不生成，完全靠算法實(shí)現(xiàn)對(duì)齊。

相鄰的數(shù)字與字任串會(huì)合并成一個(gè)文本節(jié)點(diǎn)，比如說(shuō)

xxx{111}yyy

在React15中，div里面有3個(gè)文本節(jié)點(diǎn)，兩個(gè)分界用的注釋點(diǎn)，現(xiàn)在只有一個(gè)文本節(jié)點(diǎn)，其nodeValue為xxx111yyy，用于真實(shí)DOM的減少，性能大幅提升。

setState/forceUpdate的回調(diào)函數(shù)以前總在更新周期后才執(zhí)行，現(xiàn)在提前到每個(gè)組件的componentDidMount/Update后執(zhí)行。

生命周期順序改變，先A.componentWillMount->B.componentWillUnmount->A.compountDidMount.

createPortal的事件冒泡是基于虛擬DOM進(jìn)行冒泡的

跑通錯(cuò)誤邊界的1900多行的測(cè)試，這里的規(guī)則非常多，有空才詳細(xì)介紹。有了它，React16成為對(duì)錯(cuò)誤處理最完善的框架。

虛擬DOM的結(jié)構(gòu)發(fā)生變化，每個(gè)節(jié)點(diǎn)都有return, child, sibling等描述自己位置的屬性。
-return 指向父節(jié)點(diǎn)，類似于瀏覽器的parentNode, 取代之前的_hostParent
-child 指向第一個(gè)子節(jié)點(diǎn)，類似于瀏覽器的firstChild
-sibling 指向下一個(gè)節(jié)點(diǎn)，類擬于瀏覽器的nextSibling

componentDidUpdate現(xiàn)在只保留兩個(gè)參數(shù)，lastProps與lastState

其他變化與完善

React.options添加了大量鉤子，埋點(diǎn)于vnode與組件的各個(gè)生命周期之中。

重構(gòu)findDOMNode,遇到注釋節(jié)點(diǎn)返回null

重寫受控組件（基于事件綁定）與非受控組件（基于屬性監(jiān)控）。

模仿React16，使用stateNode屬性代替舊有的_hostNode與_instance。

React.Children與flattenChilden底層依賴的方法由_flattenChildren改為operateChildren，讓其更具通用性，
flattenChilden更名為fiberizeChildren，產(chǎn)出一個(gè)帶鏈表結(jié)構(gòu)的數(shù)組。

新的架構(gòu)：元素虛擬DOM與組件虛擬DOM都有自己的更新對(duì)象，簡(jiǎn)化匹配算法

簡(jiǎn)化Refs模塊

修復(fù)更新虛擬DOM時(shí)，namespaceURI丟失的BUG

升級(jí)SSR版本

升級(jí)lib下的ReactTestUtils

測(cè)試case多達(dá)524個(gè)。

使用

npm i anujs

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

npm i -g anu-cli

webpack.config中如何代替原來(lái)用React編寫的項(xiàng)目

resolve: {
   alias: {
      "react": "anujs",
      "react-dom": "anujs",
        // 若要兼容 IE 請(qǐng)使用以下配置
        // "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"
        //如果你在移動(dòng)端用到了onTouchTap事件
        "react-tap-event-plugin": "anujs/lib/injectTapEventPlugin",  
   }
},

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

https://github.com/RubyLouvre...