anu,一个无痛实践React的迷你React框架
1003367244
8年前
<p>近年来，冒出大量MVVM框架，但它几乎无一例外依赖于babel, webpack等编译或手脚架，这让小公司出身的前端们望洋兴叹。因此小城市的前端们，没有高手带着，许多培训班出身，或自学成才转行，如果引用react, ng2这类框架无异于自杀。出问题，webpack配置问N个群都没有问题。依赖于编译的框架也很难调试。</p> <p>而我们公司则出于另一个目的开发这个框架，手机端需要体积更少的框架。学习了preact, react-lite，我造出了这个类React框架。</p> <p>此外，它还有一个好处，它是面向未来的。它所依赖的高级语法，都是可以通过简单的pollfill来修复。而JSX，则依赖于babel。anu将JSX改造成字符串，三年后，http2流行了，不需要打包，没有体积的压力。我们就没有维护一个破旧的 webpack的压力。因此这是一个很轻量的框架，回复到jQuery时代，简单直接用页面引用JS主文件就行，其余的交由es6 modules来管理。</p> <p>由于它与React极其相似，因此React生态圈的东西简单改造一下便能用了。</p> <p>下面是一个例子，用于三个文件。以后可能会考虑合成一个。</p> <pre> <code class="language-javascript"><!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></code></pre> <p>目前定义组件时是用es6方式，如果你想支持IE8等老旧浏览器，也可以用createClass来定义类。</p> <p>目前anu是支持React的多种定义组件方式，包括Stateless Component, InPure Component, Pure Component。</p> <p>如果你想减少改动，继续用React命名，可以做以下处理：</p> <pre> <code class="language-javascript">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}) } })</code></pre> <p>基本上我是朝着100%模仿React来打造它，但一些过旧的官方不推荐的功能，我也像React那样做成插件。</p> <p>目前没有支持的方法与对象</p> <ol> <li> <p>PropTypes</p> </li> <li> <p>childContextTypes</p> </li> <li> <p>Children的方法集合</p> </li> <li> <p>mixin机制</p> </li> </ol> <p> </p> <p> </p> <p>来自：https://segmentfault.com/a/1190000008603928</p> <p> </p>