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 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機制
來自：https://segmentfault.com/a/1190000008603928