随着react的流行，针对其改良方案也逐渐增多起来。有的在体积上进行优化，有的在性能上进行优化，有的在两者上做努力。anu就是最后一种情况。
anu是我继avalon之后又一个新框架，解决移动端打包过大的问题而诞生的。内部名字叫qreact，它早期是基于preact改进来的，已经在公司业务上使用了。
preact,react-lite是现在比较流行的react-like框架。当然也有人提到inferno，但inferno要改动过多。参考这些框架，我的迷你react框架anu走得更远，完全兼容react-redux,react-router,官方chrome调试工具。性能上也非常优秀。
下面是dbmonster的测试结果：
preact想在业务线用其实还需要用preact-compat，用了后性能可能折损过半。
体积大概是原来的1/10,从3万行变成1.7K
更多例子可以见GITHUB仓库
https://github.com/RubyLouvre...
https://github.com/RubyLouvre...
我会继续优化anu，让它的浏览器兼容性更好，性能更好。欢迎大家加星与试用
<!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="./test/babel.js"></script>
<script type='text/babel'>
var s
var str = ''
class Component1 extends React.Component {
componentWillUnmount() {
str += 'xxxx'
}
render() {
return <div className="component1">{this.props.children}</div>
}
}
class Component2 extends React.Component {
componentWillUnmount() {
str += ' yyyy'
}
render() {
return <div className="component1">xxx</div>
}
}
var index = 1
function detect(a) {
if (index === 1) {
// expect(typeof a).toBe('object')
} else {
// expect(a).toBeNull()
}
}
class App extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
index = 0
this.forceUpdate()
}
render() {
return index ?
<div ref='a' onClick={this.handleClick.bind(this)}>
<Component1>
<p ref={detect}>这是子节点</p>
<Component2 />
</Component1>
</div> : <div>文本节点</div>
}
};
window.onload = function(){
s = ReactDOM.render( <App />,document.getElementById('example'))
}
</script>
</head>
<body>
<div>这个默认会被清掉</div>
<div id='example'></div>
</body>
</html>
