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 | |||
React.PureComponent | class | |||
React.createClass | Top-Level API | |||
React.createElement | Top-Level API | |||
React.cloneElement | Top-Level API | |||
React.createFactory | Top-Level API | |||
React.isValidElement | Top-Level API | |||
React.createContext (16.3新) | Top-Level API | |||
React.Fragment(16.2新) | Top-Level API | |||
React.DOM | Top-Level API | |||
React.PropTypes | Top-Level API | compat | compat | |
React.Children | Top-Level API | |||
ReactDOM.render | Top-Level API | |||
ReactDOM.unmountComponentAtNode | Top-Level API | |||
ReactDOM.unstable_renderSubtreeIntoContainer | Top-Level API | |||
ReactDOM.findDOMNode | Top-Level API | |||
ReactDOMServer.renderToString | Top-Level API | |||
ReactDOMServer.renderToStaticMarkup | Top-Level API |
其中,createClass,isValidElement,PropTypes,Children,unmountComponentAtNode,unstable_renderSubtreeIntoContainer不建议大家使用了。
组件实例API 对照表
名称 | 类别 | React | anu | preact(-compat) |
---|---|---|---|---|
Instance .setState | Component API | |||
Instance .replaceState | Component API | |||
Instance .forceUpdate | Component API | |||
Instance .isMounted | Component API |
组件Specs 对照表
名称 | 类别 | React | anu | preact(-compat) |
---|---|---|---|---|
render | Specs | |||
state | Specs | |||
defaultProps | Specs | |||
propTypes | Specs |
组件生命周期 对照表
名称 | 类别 | React | anu | preact(-compat) |
---|---|---|---|---|
componentWillMount(合并setState) | Component Lifecyle | |||
componentDidMount | Component Lifecyle | |||
componentWillReceiveProps(合并setState) | Component Lifecyle | |||
shouldComponentUpdate | Component Lifecyle | |||
componentWillUpdate | Component Lifecyle | |||
componentDidUpdate | Component Lifecyle | |||
componentWillUnmount | Component Lifecyle | |||
componentDidCatch(16.0新) | Component Lifecyle | |||
getDerivedStateFromProps(16.2新) | Component Lifecyle |
特性支持对照
名称 | React | anu | preact(-compat) | |
---|---|---|---|---|
contextTypes | ||||
getChildContext | compat | compat | ||
ref(两种形式) | ||||
cloneElement后字符串ref的正确处理 | ||||
getDOMNode | ||||
componentDidUpdate调用setState不会卡死 | ||||
无状态组件的模块模式组件 | ||||
相同虚拟DOM的context穿透更新策略 | ||||
style对象 | ||||
onEvent(尤其是onChange/MouseEnter/Focus的支持) | ||||
onEventCapture | ||||
dangerouslySetInnerHTML | ||||
(非)受控组件 | ||||
IE8支持 | (高版本不支持) | |||
组件返回数组 |
anu提交ReactIE+polyfill可以兼容到IE6,三方都支持React官方的Chrome DevTools
1.3.0的改进如下:
- 支持React16.3的createContext new API
- 添加大量React.Fragment测试,修正一些边缘的BUG
- 升级diff机制,由新旧vnode进行比较,改成fiber与新vnode进行比较,用新vnode的数据更新fiber与视图
- 添加input[type=search]的onChange事件支持
- 修正传送门在antd3.0的一个边缘BUG(重复插入两次,导致文本节点消失)
- 属性名与方法名大改动,与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加星星与试用!!!