关于JSX的思考

我们平时都编写JSX来创建React组件，JSX非常好用，能适应各种各样的场景。依现状不难列出和JSX有关的以下几个话题：

• 按目前ecmascript的语法特性来看，原生的JSX语法在编写各种React组件时都能很好的适配。只是一些特殊情况可能存在争议，如在编写逻辑判断时需要使用ok ? <i>ok</i> : <i>no</i>或ok && <i>ok</i>;

• 我们不时会拿JSX和模板引擎进行优劣对比：

  • JSX的主要优势：更灵活适合编写复杂逻辑、完善的IDE代码静态检查(如typescript的支持度)等;
  • 模板引擎(例如Vue的模板)的主要优势：更丰富的语法糖、组件逻辑与表现分离(SFC)、容易扩展更多的语法(自定义过滤器、指令)等;

• JSX可以通过babel插件提供扩展，例如：

  • 属css in js技术的styled-jsx：编译后有运行时代码，有3kb gzip的网络开销，但能提供不少JSX语法之外的辅助功能。
  • 提供JSX流程控制的jsx-control-statements：编译后没有运行时代码，副作用小，但不可以支持扩展新的语法。

用babel插件让JSX吸收模板引擎的特性?

我们试想一下，JSX在如果在保持现有功能与特性的情况下，同时也拥有模板引擎的以下优点是不是会更好用？

• 更丰富的语法糖(指令、流程控制等)

• 容易扩展更多的语法糖

以上我们通过babel插件就可以实现。NornJ是我们创造的一个可扩展并可支持React的模板引擎; 而它提供的配套babel插件则能够在用户并无感知的情况下，将模板引擎语法化整为零地插入到原生JSX中运行，如下：

const test = props => (
  <if condition={props.isTest}>  //此行为模板
    <i>success</i>               //此行为原生JSX
    <else>                       //此行为模板
      <i>fail</i>                //此行为原生JSX
    </else>                      //此行为模板
  </if>                          //此行为模板
);

下面的是一个在线可运行实例：

• 在线Playground(codesandbox)