资讯专栏INFORMATION COLUMN

高性能迷你React框架 anu1.2 发布,支持React16的三大特性

whidy / 1870人阅读

摘要:支持的三大特征,组件支持返回数组,传送门与错误边界。下面是新支持的特性的第一个参数可以是数组,字符串,数字,。有了它,成为对错误处理最完善的框架。虚拟的结构发生变化,每个节点都有等描述自己位置的属性。

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特性

ReactDOM.render的第一个参数可以是数组,字符串,数字,undefined, null, true, false。

React组件的render方法可以返回数组,字符串,数字,undefined, null, true, false.

对于undefined, null, true, false, React15是生成一个占位用的注释节点(nodeType为8),现在什么也不生成,完全靠算法实现对齐。

相邻的数字与字任串会合并成一个文本节点,比如说

xxx{111}yyy
在React15中,div里面有3个文本节点,两个分界用的注释点,现在只有一个文本节点,其nodeValue为xxx111yyy,用于真实DOM的减少,性能大幅提升。

setState/forceUpdate的回调函数以前总在更新周期后才执行,现在提前到每个组件的componentDidMount/Update后执行。

生命周期顺序改变,先A.componentWillMount->B.componentWillUnmount->A.compountDidMount.

createPortal的事件冒泡是基于虚拟DOM进行冒泡的

跑通错误边界的1900多行的测试,这里的规则非常多,有空才详细介绍。有了它,React16成为对错误处理最完善的框架。

虚拟DOM的结构发生变化,每个节点都有return, child, sibling等描述自己位置的属性。
-return 指向父节点,类似于浏览器的parentNode, 取代之前的_hostParent
-child 指向第一个子节点,类似于浏览器的firstChild
-sibling 指向下一个节点,类拟于浏览器的nextSibling

componentDidUpdate现在只保留两个参数,lastProps与lastState

其他变化与完善

React.options添加了大量钩子,埋点于vnode与组件的各个生命周期之中。

重构findDOMNode,遇到注释节点返回null

重写受控组件(基于事件绑定)与非受控组件(基于属性监控)。

模仿React16,使用stateNode属性代替旧有的_hostNode与_instance。

React.Children与flattenChilden底层依赖的方法由_flattenChildren改为operateChildren,让其更具通用性,
flattenChilden更名为fiberizeChildren,产出一个带链表结构的数组

新的架构:元素虚拟DOM与组件虚拟DOM都有自己的更新对象,简化匹配算法

简化Refs模块

修复更新虚拟DOM时,namespaceURI丢失的BUG

升级SSR版本

升级lib下的ReactTestUtils

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92178.html

相关文章

  • 性能迷你React框架 anu1.2.1 发布

    摘要:这次更新主要是改善了对焦点的处理及的语法糖的支持优化的性能,将原方法内部用到函数与对象提到全局上来,这就比官方的对象池技术更能提升性能。 anu1.2.1这次更新主要是改善了对焦点的处理及react16.2的Fragment语法糖的支持 优化fiberizeChildren的性能,将原方法内部用到函数与对象提到全局上来,这就比官方的对象池技术更能提升性能。 修复受控组件在textar...

    phpmatt 评论0 收藏0
  • 性能迷你React框架 anu1.2.2 发布

    摘要:本版本主要是对的组件进行最后一次修复工作,除了组件,都支持了。其次它是市场上唯一支持特征的库。明年也会搞一个状态库,对异步渲染友好。路由,状态库,等一套东西与一起配合使用。 本版本主要是对antd3的组件进行最后一次修复工作,除了mention组件,都支持了。 明年的精力就集中异步渲染与后端渲染上。anujs的体积经过几个版本的迭代,体积有所增大24kb(没有压缩的情况),但还是远远少...

    wanghui 评论0 收藏0
  • 性能迷你React框架 anu1.2.3 发布

    摘要:本版本主要添加了的支持解决的问题修复的模块的的支持添加方法,增强对第三方的支持使用或者使用架手架中如何代替原来用编写的项目若要兼容请使用以下配置如果引用了或需要添加如下别名如果你在移动端用到了事件欢迎大家为加星星与试用 本版本主要添加了renderToNodeStream的支持 解决PropTypes的share问题 var check = function () { ...

    JasinYip 评论0 收藏0
  • 性能迷你React框架anujs1.1.3发布

    摘要:现在只差一个组件就完全支持阿里的库了。一共跑通个测试应该是全世界最接近官方的迷你框架了。以后的工作就是把的一些新特性支持了,包括组件返回数字字符串数组,钩子与。随着代码的增加,我会将一些废弃的方法拆分出来。在打包时,根据你们的喜好进行选择。 anujs现在只差一个组件(mention)就完全支持阿里的antd UI库了。一共跑通346个测试, 应该是全世界最接近官方React的迷你框架...

    hosition 评论0 收藏0
  • 性能迷你React框架 anu1.3.0 发布

    摘要:是一款高性能框架,是目前世界上对兼容最好的迷你库。自起,相继推出,与等新,表明官方正积极由纯库向大而全的框架演变,它将会越来越好用。一些迷你库可能跟不上步伐,现在也只有有这实力跟进。 anujs1.3.0是一款高性能React-like框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, createR...

    Flands 评论0 收藏0

发表评论

0条评论

whidy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<