高性能迷你 React 框架 anu1.3.0 发布

[cheng19840218]

anujs1.3.0 是一款高性能 React-like 框架，是目前世界上对 React16 兼容最好的迷你库。

自 React16 起，相继推出 createContext，createPortal, createRef 与 createResource 等新 API，表明官方正积极由纯 view 库向大而全的框架演变，它将会越来越好用。一些迷你库可能跟不上步伐，现在也只有 anujs 有这实力跟进。

anujs 作为一个迷你库，相对其他产品，它最大的优势是与 React 兼容性好，换言之可以直接使用 antd，react-router 等第三方库。其他迷你库可能体积会更少，但要你把所有东西都做一遍，无法享受 React 庞大生态圈的好处.

React 官方 API、anu 与 preact 对照表

https://github.com/RubyLouvre/anu/blob/master/%E4%B8%8E%E5%AE%98%E6%96%B9React%E7%9A%84%E5%AF%B9%E6%AF%94.md

目前已经跑通 562 个测试（大多数是基于 React 官方测试，其他是由项目中遇到的 BUG 抽取出来），去哪儿网平台许多工具都用 Qreact 取代 React，体积节省了 60%（ 110kb --> 32kb ）。

1.3.0 的改进如下：

1. 支持 React16.3 的 createContext new API
2. 添加大量 React.Fragment 测试，修正一些边缘的 BUG
3. 升级 diff 机制，由新旧 vnode 进行比较，改成 fiber 与新 vnode 进行比较，用新 vnode 的数据更新 fiber 与视图
4. 添加 input[type=search]的 onChange 事件支持
5. 修正传送门在 antd3.0 的一个边 缘 BUG （重复插入两次，导致文本节点消失）
6. 属性名与方法名大改动，与 React16 的 Fiber 靠近
   • vnode.vtype --> fiber.tag
   • instance.__isStateless --> fiber._isStateless
   • updater --> fiber
   • updater.vnode --> fiber._reactInternalFiber
   • updater.willReceive --> fiber._willReceive
   • updater.children --> fiber._children
   • updater.isMounted() --> fiber._isMounted()
   • updater.insertCarrier --> fiber._mountCarrier
   • updater.insertPoint --> fiber._mountPoint
   • updater.parentContext --> fiber._unmaskedContext
   • getChildContext --> getUnmaskedContext
   • getContextByTypes --> 为 getMaskedContext
   • CompositeUpdater.js --> ComponentFiber.js`
   • DOMUpdater.js --> HostFiber.js

npm i anujs

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

npm i -g anu-cli

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

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

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

https://github.com/RubyLouvre/anu