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

前端之家收集整理的这篇文章主要介绍了高性能迷你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性能好差。
  1. function needFix(fn) {
  2. return !/native code/.test(fn);
  3. }
  4. function keysPolyfill() {//解决IE下Object.keys的性能问题
  5. if (needFix(Object.keys)) {
  6. Object.keys = function(obj) {
  7. var a = [];
  8. for(var k in obj) {
  9. if (obj.hasOwnProperty(k)) {
  10. a.push(k);
  11. }
  12. }
  13. return a;
  14. };
  15. }
  16. }
  17. keysPolyfill();
  18. setTimeout(keysPolyfill,0);
  19. setTimeout(keysPolyfill,100);

使用

  1. npm i anujs

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

  1. npm i -g anu-cli

webpack.config中如何代替原来用React编写的项目

  1. resolve: {
  2. alias: {
  3. 'react': 'anujs','react-dom': 'anujs',// 若要兼容 IE 请使用以下配置
  4. // 'react': 'qreact/dist/ReactIE',// 'react-dom': 'qreact/dist/ReactIE',// 如果引用了 prop-types 或 create-react-class
  5. // 需要添加如下别名
  6. 'prop-types': 'qreact/lib/ReactPropTypes','create-react-class': 'qreact/lib/createClass'
  7. //如果你在移动端用到了onTouchTap事件
  8. 'react-tap-event-plugin': 'anujs/lib/injectTapEventPlugin',}
  9. },

欢迎大家为anujs加星星与试用!!!

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

猜你在找的React相关文章