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

前端之家收集整理的这篇文章主要介绍了高性能迷你React框架 anu1.2 发布,支持React16的三大特性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

  1. ReactDOM.render的第一个参数可以是数组,字符串,数字,undefined,null,true,false。
  2. React组件的render方法可以返回数组,字符串,数字,undefined,false.
  3. 对于undefined,false, React15是生成一个占位用的注释节点(nodeType为8),现在什么也不生成,完全靠算法实现对齐。
  4. 相邻的数字与字任串会合并成一个文本节点,比如说<div>xxx{111}yyy</div>在React15中,div里面有3个文本节点,两个分界用的注释点,现在只有一个文本节点,其nodeValue为xxx111yyy,用于真实DOM的减少,性能大幅提升。
  5. setState/forceUpdate的回调函数以前总在更新周期后才执行,现在提前到每个组件的componentDidMount/Update后执行
  6. 生命周期顺序改变,先A.componentWillMount->B.componentWillUnmount->A.compountDidMount.
  7. createPortal的事件冒泡是基于虚拟DOM进行冒泡的
  8. 跑通错误边界的1900多行的测试,这里的规则非常多,有空才详细介绍。有了它,React16成为对错误处理最完善的框架。
  9. 虚拟DOM的结构发生变化,每个节点都有return,child,sibling等描述自己位置的属性
    -return 指向父节点,类似于浏览器的parentNode,取代之前的_hostParent
    -child 指向第一个子节点,类似于浏览器的firstChild
    -sibling 指向下一个节点,类拟于浏览器的nextSibling
  10. componentDidUpdate现在只保留两个参数,lastProps与lastState

其他变化与完善

  1. React.options添加了大量钩子,填点于vnode与组件的各个生命周期之中。
  2. 重构findDOMNode,遇到注释节点返回null
  3. 重写受控组件(基于事件绑定)与非受控组件(基于属性监控)。
  4. 模仿React16,使用stateNode属性代替旧有的_hostNode与_instance。
  5. React.Children与flattenChilden底层依赖的方法_flattenChildren改为operateChildren,让其更具通用性,
    flattenChilden更名为fiberizeChildren,产出一个带链表结构的数组
  6. 新的架构:元素虚拟DOM与组件虚拟DOM都有自己的更新对象,简化匹配算法
  7. 简化Refs模块
  8. 修复更新虚拟DOM时,namespaceURI丢失的BUG
  9. 升级SSR版本
  10. 升级lib下的ReactTestUtils
  11. 测试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.f2er.com/react/302137.html

猜你在找的React相关文章