JSX 和 template 随想

Posted 2021-01-03 liaofy

就目前而言，我用到的前端页面开发框架主要有两种：以JSX为主的react和以template为主的vue。

虽然这两种方式各有千秋，但我其实更偏爱template多一些。为什么？

相较于灵活的JSX，template显得有些呆滞，但我认为它更符合我们的书写习惯（想想我们最开始是如何编写html的），简单、直观、更好维护是我偏爱模板的三大理由。

---

直到某天一个bug的出现，让我对template有了新的思考。

// 出现 bug 的代码片段

<template v-if="oitem.show">
  <div class="a-text-light" v-for="(oitem, j) in item.content" :key="j">
    {{ooitem.date}} {{oitem.week}}
  </div>
</template >

注意上面的代码，由于~手误~手残，在第一个oitem前多写了一个o。eslint没有发现，编译过程也没报错，由于对应业务的特殊性，测试中也没有触发错误。

于是上线，boom！

多一个字母，让整个应用崩溃掉了。该死！

这种错误不应该犯，但却又不能完全避免，怎么办？人总会犯错，但机器不会。所以，应该把错误检查交给机器执行。

有没有一种方法使得再编码或者编译过程中就能识别这个错误呢？

---

JSX将拯救你我于水火。

用JSX重构上面的代码：

let dateDiv = item.show 
  ? item.content.map(oitem => (<div className="a-text-light">{ooitem.date} {oitem.week}</div>) )
  : ‘‘;

由于JSX是类型安全的，在编译过程中就能发现错误，所以上面的ooitem就会被识别粗来。

从此不必在担惊受怕。