发布高性能迷你React框架anu
anu, 读作［安努］，原意为苏美尔的主神。
anu是我继avalon之后又一个新框架（github仓库为https://github.com/RubyLouvre/anu, 欢迎加星与试用）
此框架的创立之意有三：
提升性能， 虽然React的性能相对于传统的MVVM框架是很厉害了，但近几年冒出来的diff算法比官方版更优秀，官方版积重难返，很难短时期吸收这些成果。anu则小船好调头，第一时间收纳其中。性能是王道。天下武功，唯快不破。
压缩体积。 React+React-dom加起来有三万多行，这么大的体量任何code splitting与按需加载技术都无能为力，因此我们需要迷你版的体积。
卓越的浏览器兼容性。 React在生产环境中没有用到什么新式偏门的API，因此本来就可以兼容到IE8之下。兼容性越好，我们的后顾之忧越少。
这三个特点都是为扩展React的通用性而努力。
在开发过程中，先是参考react-lite搞了一个版本，遇到问题后又根据preact搞了一版，第二版成功后命名为qreact，已经在公司的项目中用。
第二版的特点是preact改+preact.compat改+自创事件系统+diff机制改。反正经过这次研发后，我们已经掌握了React的许多机制，但是还没有吃透preact的diff。
不过腾出时间来后，开始第三版，就是现在开源出来的anu，它大部分机制是自创的，diff机制采取react-lite。性能比第二代qreact强许多。
以下是成品anu的卖点：
- 支持React的无狀态组件，纯组件，高阶组件，受控组件与非受控组件，
- 命名空间就是React，此外还暴露了另一个别名ReactDOM在window上，省得在webpack上使用别名了。
- 体积非常小(1700行相对于react+react-dom的3万行)
- 性能是官方React的两倍以上 测试页面、 结果统计
- 生命周期函数的参数与官方保持一致
- 直接与react-redux, react-router-dom, react-router-redux混用
- 支持后端渲染
- 支持官方的chrome DevTools
如果你想将它应用于IE8或之下，需要以下补丁
低版本浏览器可能需要以下 语言补丁
或者直接使用polyfill.js https://github.com/RubyLouvre/anu/tree/master/dist/polyfill.js
详细用法与示例见官网 ，以下我会写文章展开介绍它的用法。下面是一些小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type='text/javascript' src="./dist/React.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.js"></script>
<script type="text/babel" >
class A extends React.PureComponent {
constructor(props) {
super(props)
this.state = {
aaa: {
a: 7
}
}
}
click() {
this.setState(function(state){
state.aaa.a = 8
})
}
render() {
return <div onClick={this.click.bind(this) }>{this.state.aaa.a}</div>
}
}
window.onload = function () {
ReactDOM.render(<A />, document.getElementById('example'))
}
</script>
</head>
<body>
<div>这个怎么点击也不会变</div>
<blockquote id='example'></blockquote>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type='text/javascript' src="./dist/React.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.js"></script>
<script type="text/babel" >
class Select extends React.Component{
constructor(props){
super(props)
this.state = {
value: props.value
}
this.onUpdate = props.onUpdate
this.onChange = this.onChange.bind(this)
}
componentWillReceiveProps(props){
this.state = { //更新自己
value: props.value
}
}
onChange(e){//让父组件更新自己
this.onUpdate(e.target.value)
}
render(){
return <select value={this.state.value} onChange={this.onChange}>
<option>北京</option>
<option>南京</option>
<option>东京</option>
</select>
}
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
value: '南京'
}
}
onUpdate(value){ //让子组件调用这个父组件的方法
this.setState({
value: value
})
}
onChange(e){
this.onUpdate(e.target.value)
}
render(){
return <div><Select onUpdate={this.onUpdate.bind(this)} value={this.state.value} /><input value={this.state.value} onChange={this.onChange.bind(this)} /></div>
}
}
window.onload = function () {
ReactDOM.render(<App />,
document.getElementById('example'))
}
</script>
</head>
<body>
<div>测试</div>
<blockquote id='example'></blockquote>
</body>
</html>
与Redux使用的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type='text/javascript' src="./dist/React.js"></script>
<script src="https://cdn.bootcss.com/redux/3.6.0/redux.js"></script>
<script src="./test/babel.js"></script>
<script type='text/babel'>
var addTodoActions = function (text) {
return {
type: 'add_todo',
text: text
};
}
var todoReducer = function (state, action) {
if (typeof state === 'undefined') {
return [];
}
switch (action.type) {
case 'add_todo':
return state.slice(0).concat({
text: action.text,
completed: false
});
break;
default:
return state;
}
};
var store = Redux.createStore(todoReducer);
class App extends React.Component {
constructor(props){
super(props)
this.state = {
items: store.getState()
}
this.onChange = this.onChange.bind(this)
this.handleKeyUp = this.handleKeyUp.bind(this)
this.handleAdd = this.handleAdd.bind(this)
}
componentDidMount(){
var unsubscribe = store.subscribe(this.onChange);
}
onChange(){
this.setState({
items: store.getState()
});
}
handleKeyUp(e){
if(e.which === 13){
this.handleAdd()
}
}
handleAdd(){
var input = this.refs.todo
var value = input.value.trim();
if(value)
store.dispatch(addTodoActions(value));
input.value = '';
}
render(){
return (
<div>
<input ref="todo" type="text" placeholder="输入todo项" style={{marginRight:'10px'}} onKeyUp={this.handleKeyUp} />
<button onClick={this.handleAdd}>点击添加</button>
<ul>
{this.state.items.map(function(item){
return <li>{item.text}</li>;
})}
</ul>
</div>
);
}
};
ReactDOM.render(
<App />,
document.getElementById('example')
);
</script>
</head>
<body>
<div>测试</div>
<blockquote id='example'></blockquote>
</body>
</html>
发布高性能迷你React框架anu的更多相关文章
- 高性能迷你React框架anu在低版本IE的实践
理想是丰满的,现实是骨感的,react早期的版本虽然号称支持IE8,但是页面总会不自觉切换到奇异模式下,导致报错.因此必须让react连IE6,7都支持,这才是最安全.但React本身并不支持IE6, ...
- 高性能迷你React框架anujs1.1.3发布
anujs现在只差一个组件(mention)就完全支持阿里的antd UI库了.一共跑通346个测试, 应该是全世界最接近官方React的迷你框架了. 以后的工作就是把React16的一些新特性支持了 ...
- 高性能迷你React框架anujs1.1.0发布
本版本对setState与forceUpdate内部依赖的setStateImpl进行了重构,性能稳定在60pfs之上.并且将组件实例的所有内部方法与属性都改成以___开头. https://gith ...
- 高性能迷你React框架anujs1.0.8发布
本版本由于得到业务线同学的大力支持,掀出许多问题,因此改进地方良多,为anujs在完美替换React的道路上前进了不少.现在anujs经测试可以运行于IE7中.至少怎么做可以参看官网,https:// ...
- 高性能迷你React框架anujs1.0.5发布
实现对createFactory的支持,优化scheduler与dispose机制,提供ReactShim文件,跑通公司内部4套测试 npm i anujs 或者使用架手架 https://githu ...
- 迷你MVVM框架 avalonjs 0.95发布
迷你MVVM框架 avalonjs 0.95发布 本版本最主要的改进是ms-with 深层绑定的实现,至少,avalon1.0所有重要的feature已经开发完毕,之后就是小补小漏,性能优化了. ms ...
- 迷你MVVM框架 avalonjs 0.85发布
迷你MVVM框架 avalonjs 0.85发布 本版本对循环绑定做了巨大改进,感谢@soom, @limodou, @ztz, @Gaubee 提供的大量测试文件. fix scanNodes, 在 ...
- 迷你MVVM框架 avalonjs 0.82发布
迷你MVVM框架 avalonjs 0.82发布 本版本最大的改进是启用全新的parser. parser是用于干什么的?在视图中,我们通过绑定属性实现双向绑定,比如ms-text="fir ...
- 迷你MVVM框架 avalonjs 0.8发布
本版本最重要的特性是引进了AMD规范的模块加载器,亦即原来mass Framework 的并行加载器, 不同之处,它引进了requirejs的xxx!风格的插件机制,比如要延迟到DOM树建完时触发,是 ...
随机推荐
- 光场相机重聚焦之三——Matlab光场工具包使用、重聚焦及多视角效果展示
这一小节说一下Matlab光场工具包的使用,展示重聚焦和多视角的效果. 从Lytro illum中导出的raw数据为.lfp格式的光场图像文件(约52M大小),该文件包含以下几部分:光场图像数据raw ...
- User Browsing Model简介
搜索引擎的点击日志提供了很多有价值的query-doc相关性信息,但是这些信息是有偏的,因为对于用户没有点击过的doc,我们无法确定其是否真实地被用户浏览过.即日志中记录的展现信息与实际的展现信息之间 ...
- 玩转SSH端口转发
SSH有三种端口转发模式,本地端口转发(Local Port Forwarding),**远程端口转发(Local Port Forwarding)**以及**动态端口转发(Dynamic Port ...
- 关于特殊文件权限：suid、sgid和sticky-bit
用 ls –l 命令时,能看到三个八进制数字,表示文件的权限.其实文件的权限应该用4个八进制文件来表示,没有显示的那个是第一位,用来设定一些特殊的权限,这个八进制数字的三个位是:SUID.SGID.s ...
- sdkman安装
软件开发工具管理包(Software Development Kit Manager,简称SDKMAN) 用来管理多个版本的开发环境的工具.提供命令行来安装.切换.删除.列出候选版本. 官网地址:ht ...
- 「七天自制PHP框架」第二天：模型与数据库
往期回顾:「七天自制PHP框架」第一天:路由与控制器,点击此处 什么是模型? 我们的WEB系统一定会和各种数据打交道,实际开发过程中,往往一个类对应了关系数据库的一张或多张数据表,这里就会出现两个问题 ...
- iOS APP打包分发给远程的手机测试
APP要打包给远程的朋友或客户测试,但又不是企业账号的情况下,我们只能根据手机的udid进行描述证书的配置,再打包分发给提供了udid的手机进行安装 一.如何得到udid? 手机连接到mac电脑,打开 ...
- Android 安卓实现页面相互跳转并相互传递参数
一.对于两个页面之间相互传值,跳转的时候我们使用 startActivityForResult(intent,0),而不是startActivity(intent) 这个方法 第一个页面中在触发跳转的 ...
- es6英文文档翻译
ECMA-262英文文档翻译,github地址: https://github.com/zhoushengmufc/es6 ECMA-262英文文档翻译,在线地址: http://zhoushengf ...
- 用react系列技术栈实现的demo整合系统
引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...