现在react大红大紫,但它也有一个致命的缺陷,就是依赖于babel编译。随着浏览器的进化,react社区的许多语法糖都可以直接用,但jsx这个facebook的私货则没有办法了。换言之,jsx是我们直接用react的最大障碍。不处理它,就怎么得上babel,就得上webpack。
我们定义一个组件通常是这样
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
render方法是jsx出现的地方。
我们可以劫持一下这方法。
Component.prototype.render = function(){
return this.compile(this.$jsx)
}
然后$jsx属性是用es6的模块字符串来定义JSX
$jsx: `<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>`
compile方法里面实现一个类似jsx的模板引擎,然后将this传进去,但得jsx编译后的对象组。
react本身也巨复杂,现在市面上有许多迷你化的react实现,可以实现一个小型的react。去掉其PropTypes(这个在生产环境通常会压缩掉), Children(这个只用于内部), Mixin(这个官方也不建议使用)等功能。
有关JSX模板引擎,我已经搞得差不多,欢迎大家参与进来。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。