草庐IT

全面理解JSX

 Island 2023-03-28 原文

1 简介

JSX(JavaScript XML)，即可拓展的JavaScript，是react定义的一种类似于XML的js扩展语法:JS+XML。它本质上是React.createElement(type，config，...children)的语法糖,主要用于创建React元素，生成虚拟DOM

2 使用jsx

可以使用react脚手架或者引入react与babel相关脚本来体验jsx。
这里主要介绍一下后者如何使用

3 jsx语法规则

jsx包括xml格式的标签和jsx表达式{}，下面从这两个角度来介绍jsx的语法规则

标签规则

  1. 根标签单一且闭合,否则抛出异常
  2. 标签类名使用className而非class，内联样式的属性名采用小驼峰形式命名
    const FC = () => (
        <h1 className="font-red">
            hello react
            <span style={{ color: 'blue' }} onClick={() => { alert('click span') }}>inner text</span>
        </h1>
    )
  1. 标签属性都可以使用jsx表达式{},只有字符串可以省略大括号
    <h1 className="font-red">
            hello react
    </h1>

jsx表达式规则

  1. {}中必须返回一个值
  2. 基于1,流程控制与循环语句语句如if、for是不允许的,因为他们默认没有返回值,而逻辑运算符如&&、||、三元表达式是允许的,函数也是允许的,因为它们一定会返回一个值。因此jsx中做逻辑判断的时候优先使用后者。
  3. 基于2,如果一定要使用if、for,考虑在jsx表达式中使用IIFE
    <input type="text" value={((type)=>{
        if(type === 1){
            return 'one'
        }else if(type === 2){
            return 'two'
        }else{
            return ''
        }
    })(type)} />
  1. 对于falsy值，0会被正常渲染到页面，而false,true,null,undefined不会。如果一定要渲染它们，请先转换成字符串。
    // 比如下面这段代码会在页面上显示一个不符合期望的0
    const FC2 = ({arr}) => <span>{arr.length && arr.join()}</span>
    ReactDOM.render(<FC2 arr={[]} />, document.getElementById('app'))

4 jsx优缺点

4.1 优点

js语法在运行时灵活的特性
基于js语法拓展，jsx具有js较为灵活的特点

xml在树状结构的表现上较为优秀
因为在嵌套层数较深、交互逻辑更复杂的情况下，xml+js比起js直接创建dom或CreateElement等方式来说更人性化、更易于维护

放止XSS DOM注入型攻击
jsx会将标签转义为字符串，以防止恶意标签被注入到页面

    // 页面上展示文案: <a href="#">inner text<\/a>
    const FC = ({value}) => <div>{value}</div>
    ReactDOM.render(<FC value={`<a href="#">inner text<\/a>`} />, document.getElementById('app'))
    
    // 页面上出现a标签，DOM被注入
    const FC = ({value}) => <div dangerouslySetInnerHTML={{__html:value}}></div>
    ReactDOM.render(<FC value={`<a href="#">inner text<\/a>`} />, document.getElementById('app'))

4.2 缺点

导致项目依赖增多
jsx必须依赖babel等编译工具转换成React.createElement才可以正常运行，导致项目依赖增多

5 深入react源码解读jsx到ReactElement

此后，jsx被编译成了React.CreateElement，后面要做的事情就是执行这个方法并创建React元素。对后续细节感兴趣可以看看这篇深入react源码解读jsx到ReactElement

JSX全面jsxstronggtReact

有关全面理解JSX的更多相关文章

  1. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  2. CAN协议的学习与理解 - 2

    最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  3. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  4. ruby - 易于初学者理解的 Ruby 库 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭3年前。Improvethisquestion我正处于学习Ruby的阶段，我想查看一些小型库的源代码以了解它们是如何构建的。我不知道什么是小型图书馆，但希望SO能推荐一些易于理解的图书馆来学习。因此，如果有人知道一两个非常小的库，这是新手Rubyists学习的好例子，请推荐!我想使用Manveru'sInnatelib，因为它试图保持在2000LOC以下，但我还不熟悉其中经常使用的Ruby速记。也许大约100-5

  5. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

  6. ruby - 如何理解 Ruby 中的发送者和接收者？ - 2

    我很难理解Ruby中sender和receiver的实际含义。它们一般是什么意思？到目前为止，我只是将它们理解为方法调用和获取其返回值的调用。但是，我知道我的理解还远远不够。谁能给我一个Ruby中发送者和接收者的具体解释？ 最佳答案 面向对象中的一个核心概念是消息传递和早期概念化，这在很大程度上借鉴了计算的Actor模型。艾伦·凯(AlanKay)创造了面向对象一词并发明了最早的OO语言之一SmallTalk，他拥有voicedregretatusingatermwhichputthefocusonobjectsinsteadofo

  7. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  8. ruby - 你如何理解 Ruby 中的这个三元条件？ - 2

    我在某些代码中遇到了三元组，但我无法理解条件:str.split(/',\s*'/).mapdo|match|match[0]==?,?match:"somestring"end.join我确实理解我是在某些点上拆分字符串并将总结果转换为数组，然后依次处理数组的每个元素。除此之外，我不知道发生了什么。 最佳答案 一种(稍微)不那么令人困惑的写法是:str.split(/',\s*'/).mapdo|match|ifmatch[0]==?,matchelse"somestring"endend.join我认为多行三元语句很糟糕，尤其是

  9. ruby - 您如何将 S3 理解为 Ruby 中的分层目录结构？ - 2

    有没有人成功地将S3存储桶读取为子文件夹？文件夹1--子文件夹2----文件3----文件4--文件1--文件2文件夹2--子文件夹3--文件5--文件6我的任务是读取文件夹1。我希望看到子文件夹2、文件1和文件2，但看不到文件3或文件4。现在，因为我将存储桶键限制为prefix=>'folder1/'，你仍然会得到file3和4，因为它们在技术上具有folder1前缀。似乎真正做到这一点的唯一方法是吸收folder1下的所有键，然后使用字符串搜索从结果数组中实际排除file3和file4。有没有人有过这方面的经验？我知道像Transmit和Cyber​​duck这样的FTP风格的S3

  10. 关于yolov5训练时参数workers和batch-size的理解 - 2

    关于yolov5训练时参数workers和batch-size的理解yolov5训练命令workers和batch-size参数的理解两个参数的调优总结yolov5训练命令python.\train.py--datamy.yaml--workers8--batch-size32--epochs100yolov5的训练很简单，下载好仓库，装好依赖后，只需自定义一下data目录中的yaml文件就可以了。这里我使用自定义的my.yaml文件，里面就是定义数据集位置和训练种类数和名字。workers和batch-size参数的理解一般训练主要需要调整的参数是这两个：workers指数据装载时cpu所使

随机推荐