JSX 和 template 随想

时间:2022-12-06 14:21:21

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

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

相较于灵活的JSXtemplate显得有些呆滞,但我认为它更符合我们的书写习惯(想想我们最开始是如何编写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前多写了一个oeslint没有发现,编译过程也没报错,由于对应业务的特殊性,测试中也没有触发错误。

于是上线,boom!

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

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

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


JSX将拯救你我于水火。

JSX重构上面的代码:

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

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

从此不必在担惊受怕。

JSX 和 template 随想的更多相关文章

  1. 谈谈 Vue 模板和 JSX

    工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX.Template 有关吗?当然有.在 React 中使用 JSX,众所周知, JSX 需要经过 T ...

  2. 在Vue中使用JSX,很easy的

    摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

  3. Vue相关,Vue JSX

    JSX简介 JSX是一种Javascript的语法扩展,JSX = Javascript + XML,即在Javascript里面写XML,因为JSX的这个特性,所以他即具备了Javascript的灵 ...

  4. Vue3&period;0 Function API---------引用

    1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...

  5. 【前端芝士树】Vue&period;js面试题整理 &sol; 知识点梳理

    [前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

  6. vue用template还是JSX?

    各自特点 template 模板语法(HTML的扩展) 数据绑定使用Mustache语法(双大括号) <span>{{title}}<span> JSX JavaScript的 ...

  7. 学习 React&lpar;jsx语法&rpar; &plus; es2015 &plus; babel &plus; webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  8. &lbrack;Cycle&period;js&rsqb; Hyperscript as our alternative to template languages

    Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can cr ...

  9. vue jsx 使用指南

    vue jsx 使用指南 vue jsx 语法与 react jsx 还是有些不一样,在这里记录下. let component = null // if 语句 if (true) { compone ...

随机推荐

  1. AngularJS事件绑定的使用详解

    本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助. 1.绑定事件:表达式.事件方法名: 2.绑定点击事件实例:显示.隐藏页面 ...

  2. C语言 指针与字符串

    C语言可以在栈区 or 堆区 or 全局区 存放字符串,字符串不单单是存储在全局区的. //字符串与指针 #include<stdio.h> #include<stdlib.h&gt ...

  3. git托管代码随笔--运用ssh传输,不用每次提交频繁输入github账号密码

    遇到问题:在使用git bash的时候 每次git push均要输入账号密码. 问题原因:使用的是http传输,需用ssh传输. 解决方法: 1.设置密钥 ssh-keygen -t rsa -C & ...

  4. delphi 05 图片和超链接

    超链接 /取消超链接 插入/取消 书签 插入图片 粘贴图上CTRL+v 截图 插入表情GIF WEB背景色 WEB背景图片      WebBrowser1.OleObject.document.ge ...

  5. uva 816 - Abbott&amp&semi;&num;39&semi;s Revenge(有点困难bfs迷宫称号)

    是典型的bfs,但是,这个问题的目的在于读取条件的困难,而不是简单地推断,需要找到一种方法来读取条件.还需要想办法去推断每一点不能满足条件,继续往下走. #include<cstdio> ...

  6. XML数据读取方式性能比较(一)

    原文:XML数据读取方式性能比较(一) 几个月来,疑被SOA,一直在和XML操作打交道,SQL差不多又忘光了.现在已经知道,至少有四种常用人XML数据操作方式(好像Java差不多),不过还没有实际比较 ...

  7. Android -- Annotation(注解)原理详解及常见框架应用

    1,我们在上一篇讲到了EventBus源码及3.0版本的简单使用,知道了我们3.0版本是使用注解方式标记事件响应方法的,这里我们就有一个疑问了,为什么在一个方法加上类似于"@Subscrib ...

  8. 学习笔记TF009&colon;对数几率回归

    logistic函数,也称sigmoid函数,概率分布函数.给定特定输入,计算输出"success"的概率,对回题回答"Yes"的概率.接受单个输入.多维数据或 ...

  9. ABP Zero示例项目问题总结

    1.ABP Zero项目,登录时出现如图“Empty or invalid anti forgery header token.”错误提示 ABP Zero项目,登录时出现如图“Empty or in ...

  10. ElasticSearch&lpar;八&rpar;Elasticsearch-head 连接不上Elasticsearch的原因和解决方案

    在上篇博文里ElasticSearch(七) Elasticsearch在Centos下搭建可视化服务中已经访问到了可视化界面.然后兴奋地进行了数据提交测试,提交啊,刷新啊,就是看不到数据变化,仔细一 ...