使用jsx去写magix

[purplebamboo]

目前 magix本身已经支持了虚拟dom diff。

但是做的是先模板编译，再运行时字符串转换到vdom，再去diff。

这带来一些问题：

• 模板编译这块因为是渲染之后变成，需要处理很多html实体转换的问题，参数透传也很麻烦
• 运行时转换vom性能应该比较差，当然期待后续的具体测试。

另外，项目人员使用magix时经常会纠结语法的问题。

基于这些考虑，我们是否可以直接用jsx去写magix解决这些问题。

[purplebamboo]

目前已经初步做了一个版本，完成jsx所有语法。

分支在：https://github.com/thx/magix/tree/jsx-with-magix

开发了一个库： https://github.com/thx/magix-transform-jsx 来做jsx到vdom的转换 支持 webpack场景下的 babel-loader，也支持 api式的直接调用。

基于此做了一个例子： https://github.com/purplebamboo/magix_use_jsx

[purplebamboo]

特点是：

• 对于magix的改造都是 增量修改，与原有功能保持兼容
• 通过hack手段，使用magix底层功能模块实现了jsx的语法兼容

比如下面这段代码：

import * as Magix from "../lib/magix"
import Test from "./test.jsx"

module.exports = Magix.View.extend({
  tmpl: function (data) {
    var a1='"';
    if(data.key==1){
      return (
        <div data-id="2222">
          <Test x="2222" m={{a:1111}} class="xxx"/>
          <span class="mmmm" id="2222">1111</span>
          <span onClick={this.testcb.bind(this,{a:222})} test="2">2222</span>
        </div>
      )
    }else{
      return (
        <div data-id="2222">eeeeee</div>
      )
    }
  },
  ctor: function (opt) {

  },
  render: function () {

    this.updater.digest()
    setTimeout(()=>{
      this.updater.set({
        "key":1
      }).digest()
    },1000)
  },
  testcb: function(data,e){
    console.log(data)
  }
})

与原有写法差别不大，但是传参，还有事件调用都变得比较容易。