脚本宝典收集整理的这篇文章主要介绍了

不用编译的jsx与react框架构想

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

现在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模板引擎,我已经搞得差不多,欢迎大家参与进来。

https://github.com/RubyLouvre...

总结

以上是脚本宝典为你收集整理的

不用编译的jsx与react框架构想

全部内容,希望文章能够帮你解决

不用编译的jsx与react框架构想

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过