博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
高性能迷你React框架 anu1.2 发布,支持React16的三大特性
阅读量:5891 次
发布时间:2019-06-19

本文共 1985 字,大约阅读时间需要 6 分钟。

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, null, true, false.
  3. 对于undefined, null, true, 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

或者使用架手架

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加星星与试用!!!

转载地址:http://hmfsx.baihongyu.com/

你可能感兴趣的文章
POI导出JavaWeb中的table到excel下载
查看>>
RAID 磁盘陈列详解
查看>>
公司组网核心、汇聚、接入层交换机配置
查看>>
一个IO的传奇一生(2)
查看>>
linux文件描述符
查看>>
C++ const 详解
查看>>
给Github上的项目添加开源协议
查看>>
imx53 start board 开箱照
查看>>
免费的编程中文书籍索引
查看>>
struts2引入标签时遇到的问题
查看>>
Hibernate例子-自己写的一个干净的给予注解的Hibernate例子
查看>>
WorkFlow入门Step.6—Building a Console Application -For-WF4.0
查看>>
sota系统服务进程的启动与停止(章节:4.2)
查看>>
day19 反射
查看>>
新闻快讯_2
查看>>
常见电商项目的数据库表设计(MySQL版)
查看>>
JS的document.all函数使用示例
查看>>
Spring配置之OpenSessionInViewFilter
查看>>
pixel2坑
查看>>
20135337朱荟潼 Linux第三周学习总结 ——Linux内核源代码简介
查看>>