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 的三大特征,组件支持返回数组,传送门与错误边界。node
下面是新支持的React16特性react
- ReactDOM.render的第一个参数能够是数组,字符串,数字,undefined, null, true, false。
- React组件的render方法能够返回数组,字符串,数字,undefined, null, true, false.
- 对于undefined, null, true, false, React15是生成一个占位用的注释节点(nodeType为8),如今什么也不生成,彻底靠算法实现对齐。
- 相邻的数字与字任串会合并成一个文本节点,好比说
<div>xxx{111}yyy</div>
在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
其余变化与完善webpack
- 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个。
使用git
npm i anujs
或者使用架手架 https://github.com/Levan-Du/a...github
npm i -g anu-cli
webpack.config中如何代替原来用React编写的项目web
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...npm