脚本宝典收集整理的这篇文章主要介绍了anu,一个无痛实践React的迷你React框架，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
近年来，冒出大量MVVM框架，但它几乎无一例外依赖于babel, webpack等编译或手脚架，这让小公司出身的前端们望洋兴叹。因此小城市的前端们，没有高手带着，许多培训班出身，或自学成才转行，如果引用react, ng2这类框架无异于自杀。出问题，webpack配置问N个群都没有问题。依赖于编译的框架也很难调试。
而我们公司则出于另一个目的开发这个框架，手机端需要体积更少的框架。学习了PReact, react-lITe，我造出了这个类React框架。
此外，它还有一个好处，它是面向未来的。它所依赖的高级语法，都是可以通过简单的pollfill来修复。而JSX，则依赖于babel。anu将JSX改造成字符串，三年后，http2流行了，不需要打包，没有体积的压力。我们就没有维护一个破旧的 webpack的压力。因此这是一个很轻量的框架，回复到jQuery时代，简单直接用页面引用JS主文件就行，其余的交由es6 modules来管理。
由于它与React极其相似，因此React生态圈的东西简单改造一下便能用了。
下面是一个例子，用于三个文件。以后可能会考虑合成一个。
<!DOCTYPE htML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src='./dist/jsx-parser.js'></script>
<script src='./dist/evalJSX.js'></script>
<script src='./dist/anu.js'></script>
<script>
class @H_594_126@Hello extends anu.Component {
constructor() {
super() //Must write, or throw ReferenceError: |this| used uninitialized in Hello class constructor
this.handleClick = this.handleClick.bind(this)
}
componentWillMount() {
console.log('准备插入DOM树')
}
componentDidMount() {
console.log('已经插入DOM树')
}
handleClick() {
this.setState({
title: new Date - 0,
child: new Date - 1
})
}
static className() {
return 'Point';
}
render() {
return evalJSX(`<div tilte={this.state.title} onClick={this.handleClick} >{this.state.child || "点我"}</div>`, {
this: this
})
}
}
function main() {
return evalJSX(`<h2>对象使用anu<br /><Hello /></h2>`, {
Hello: Hello
})
}
window.onload = function() {
var result = anu.render(main(), document.body)
console.log(result)
}
</script>
</head>
<body>
<div>这个默认会被清掉</div>
</body>
</html>
目前定义组件时是用es6方式，如果你想支持ie8等老旧浏览器，也可以用createClass来定义类。
目前anu是支持React的多种定义组件方式，包括Stateless Component, InPure Component, Pure Component。
如果你想减少改动，继续用React命名，可以做以下处理：
var React = window.anu
evalJSX.globalNs = "React"。
var myComponent = React.createClass({
getDefaultProps(){
return {children: "xxxx"}
}
render(){
return evalJSX("<div>{this.props.children}</div>",{this.this})
}
})
基本上我是朝着100%模仿React来打造它，但一些过旧的官方不推荐的功能，我也像React那样做成插件。
目前没有支持的方法与对象
PropTypes
childContextTypes
Children的方法集合
mixin机制
更多介绍可见它的GITHub homepage
https://github.com/RubyLouvre...
欢迎加星星与试用
以上是脚本宝典为你收集整理的anu,一个无痛实践React的迷你React框架全部内容，希望文章能够帮你解决anu,一个无痛实践React的迷你React框架所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。