高性能迷你React框架anujs1.1.4發佈

本週在支持機票的項目中對anujs作了大量改進，包括性能上與結構上的改進。與1.1.3同樣，仍是差一個組件就徹底兼容阿里的antd UI庫。

框架自己的改進有：

1. 修正flushUpdaters中updater對象的泄露問題（須要clearArray一下）
2. 優化diffChildren的邏輯，防止出現parentNode等於null的狀況（好比爲文本節點取firstChild）
3. 簡化ControlledComponent與dispose模塊
4. 處理updateElement方法中兩個虛擬DOM的引用同樣時，調用flattenChildren時，舊的vchildren丟失的狀況
5. 移除Refs中的createStringRef，createInsanceRef，添加fireRef,
   重構detachRef,clearRefs,cloneElement,createElement有關ref的部分，儘可能減小閉包的應用
6. 將updateQueue移出全部diff方法的傳參列表，合併到調度器中
7. 新添React16的createPortal API

上面什麼修正內存泄露與減小閉包，都是在IE下才發現的問題，在chrome下一點事都沒有。但經過一些簡化改改良，代碼的可靠性大大提升了。

此外，還有周邊的優化

1. 在lib目錄下提供一個ReduxIE.js，用於在舊式IE中替換redux。由於官方redux裏面用到了一個isPlainObject方法，這個方法是由lodash庫提供的，而這個方法的源碼自己是來源於jQuery3.x，沒有針對IE進行處理，性能不好。我將它替換爲jQuery1.x的isPlainObject，就很正常運做了。

1. 改善ReactIE.js，裏面內置了一個Object.keys補丁，也是用於改善性能，es5shim.js或babel polyfill中的Object.keys性能好差。

function needFix(fn) {
    return !/native code/.test(fn);
}
function keysPolyfill() {//解決IE下Object.keys的性能問題
    if (needFix(Object.keys)) {
        Object.keys = function(obj) {
            var a = [];
            for(var k in obj) {
                if (obj.hasOwnProperty(k)) {
                    a.push(k);
                }
            }
            return a;
        };
    }
}
keysPolyfill();
setTimeout(keysPolyfill, 0);
setTimeout(keysPolyfill, 100);

使用

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...