高性能迷你React框架anujs1.1.4发布_React

上一篇: React三——生命周期下一篇:与JavaScript恋爱之React

高性能迷你React框架anujs1.1.4发布

发布时间：2019-08-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了高性能迷你React框架anujs1.1.4发布，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本周在支持机票的项目中对anujs做了大量改进，包括性能上与结构上的改进。与1.1.3一样，还是差一个组件就完全兼容阿里的antd UI库。
框架本身的改进有：

修正flushUpdaters中updater对象的泄露问题（需要clearArray一下）
优化diffchildren的逻辑，防止出现parentNode等于null的情况（比如为文本节点取FirstChild）
简化Controlledcomponent与dispose模块
处理updateElement方法中两个虚拟DOM的引用一样时，调用flattenChildren时，旧的vchildren丢失的情况
移除Refs中的createstringRef，createinsanceRef，添加fireRef,
   重构detachref,clearRefs,cloneElement,createElement有关ref的部分，尽量减少闭包的应用
将updateQueue移出所有diff方法的传参列表，合并到调度器中
新添React16的createPortal API

上面什么修正内存泄露与减少闭包，都是在IE下才发现的问题，在chrome下一点事都没有。但通过一些简化改改良，代码的可靠性大大提高了。
此外，还有周边的优化
在lib目录下提供一个reduxIE.js，用于在旧式IE中替换redux。因为官方redux里面用到了一个isPlainObject方法，这个方法是由lodash库提供的，而这个方法的源码本身是来源于jQuery3.x，没有针对IE进行处理，性能很差。我将它替换为jQuery1.x的isPlainObject，就很正常运作了。

改善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加星星与试用！！！
@L_777_10@