关于 JSX

开发网页，我们既要写视图部分【HTML】，又要写逻辑部分【JS】。

• 写 JS 时，不断翻看 HTML，确保 querySelector 能取到期望的元素。
• 改 HTML 时，一个个排查 JS 文件，确保其没受影响。
• ……

类似情况很影响工作效率。把视图和相关逻辑放在一起，成了大家迫切的需求。

就这一问题，我们来看看不同的解决思路。

---

ExtJS

视图部分也用 JS 来写，自然很容易放在一起了。

Ext.define("XXX.view.Alarm", {
  extend: "Ext.container.Container",
  xtype: "alarmpanel",

  initComponent: function() {
    Ext.apply(this, {
      layout: "border",

      items: [
        {
          xtype: "hsnavtree",
          itemId: "leftTree",
          store: Ext.getStore("AlarmNavTree"),
          cls: "left-directory",
          rootVisible: false,
          region: "west",
          width: 240
        },
        {
          xtype: "container",
          itemId: "centerContainer",
          layout: "fit",
          region: "center"
        }
      ]
    });
    this.callParent(arguments);
  }
});

layout: "border" 指定布局方式为东南西北中。
region: "west" 指定元素放在西部。

---

JSX

在 JS 中直接写 HTML，再通过编译转成 JS。思想是这样，但大家知道和 HTML 还是有区别的。

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>
    );
  }
}

---

两种思路都做到了把视图和相关逻辑放在一起。

我想 JSX 赢在了：

• 大家都熟悉 HTML，学 JSX 比学 ExtJS 那套 layout 轻松，而且 JSX 更简洁直观。
• 大家越来越追求 Dom 的语义化，ExtJS 生成的 Dom 层级太多，不但不语义化，而且性能也不咋样。

不过 JSX 这样的思想，也并不是新思想。2009 年我接触 Flex 时也见识过。Flex 在 ActionScript 的基础上发展出了 mxml，用 xml 的形式写视图，再编译成 ActionScript。

JSX -> JavaScript
mxml -> ActionScript