不用編譯的jsx與react框架構想

司徒正美發表於2017-02-17
編譯JSReact框架架構

現在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…

相關文章