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

#1

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

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

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

顶层API 对照表

preact(-compat) 是指preact+ peact-compat

名称 类别 React anu preact(-compat)
React.Component class :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
React.PureComponent class :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
React.createClass Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
React.createElement Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
React.cloneElement Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
React.createFactory Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
React.isValidElement Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
React.createContext (16.3新) Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
React.Fragment(16.2新) Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
React.DOM Top-Level API :heavy_check_mark: :heavy_multiplication_x: :heavy_check_mark:
React.PropTypes Top-Level API :heavy_check_mark: compat compat
React.Children Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
ReactDOM.render Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
ReactDOM.unmountComponentAtNode Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
ReactDOM.unstable_renderSubtreeIntoContainer Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
ReactDOM.findDOMNode Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
ReactDOMServer.renderToString Top-Level API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
ReactDOMServer.renderToStaticMarkup Top-Level API :heavy_check_mark: :heavy_multiplication_x: :heavy_multiplication_x:

其中,createClass,isValidElement,PropTypes,Children,unmountComponentAtNode,unstable_renderSubtreeIntoContainer不建议大家使用了。

组件实例API 对照表

名称 类别 React anu preact(-compat)
Instance .setState Component API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
Instance .replaceState Component API :heavy_check_mark: :heavy_multiplication_x: :heavy_check_mark:
Instance .forceUpdate Component API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
Instance .isMounted Component API :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:

组件Specs 对照表

名称 类别 React anu preact(-compat)
render Specs :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
state Specs :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
defaultProps Specs :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
propTypes Specs :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:

组件生命周期 对照表

名称 类别 React anu preact(-compat)
componentWillMount(合并setState) Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
componentDidMount Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
componentWillReceiveProps(合并setState) Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
shouldComponentUpdate Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
componentWillUpdate Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
componentDidUpdate Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
componentWillUnmount Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
componentDidCatch(16.0新) Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
getDerivedStateFromProps(16.2新) Component Lifecyle :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:

特性支持对照

名称 React anu preact(-compat)
contextTypes :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
getChildContext :heavy_check_mark: compat compat
ref(两种形式) :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
cloneElement后字符串ref的正确处理 :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
getDOMNode :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
componentDidUpdate调用setState不会卡死 :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
无状态组件的模块模式组件 :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
相同虚拟DOM的context穿透更新策略 :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
style对象 :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
onEvent(尤其是onChange/MouseEnter/Focus的支持) :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
onEventCapture :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
dangerouslySetInnerHTML :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
(非)受控组件 :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:
IE8支持 :heavy_check_mark:(高版本不支持) :heavy_check_mark: :heavy_multiplication_x:
组件返回数组 :heavy_check_mark: :heavy_check_mark: :heavy_multiplication_x:

anu提交ReactIE+polyfill可以兼容到IE6,三方都支持React官方的Chrome DevTools

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

hhh

使用

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

#2

不错,支持一下。