资讯专栏INFORMATION COLUMN

说说对JSX的认识

clasnake / 2273人阅读

摘要:认识引子最近几个月做的一个项目,使用了技术体系,自然而然的用到了。下面就总结一下自己对的认识。而这无疑增加了框架的门槛和复杂度。在被渲染之前,所有的数据都被转义成为了字符串处理。以避免跨站脚本攻击。表示对象将编译成调用。

JSX认识 引子

最近几个月做的一个项目,使用了react技术体系,自然而然的用到了JSX。下面就总结一下自己对JSX的认识。

什么是JSX

即JavaScript XML,一种在React组建内部构建标签的类XML语法。(增强React程序组件的可读性)

JSX可以看作JavaScript的拓展,看起来有点像XML。使用React,可以进行JSX语法到JavaScript的转换。

下面我们来看一下一个简单的例子。
考虑一下这个变量的声明:

const element = 

Hello, world!

;

这个标签语法既不是字符串也不是HTML,这就是JSX。它是JavaScript的一种扩展语法。

JSX小例子

我们先从官网的一个最简单的例子说起,为了让大家能够直接在本地运行,我贴出了完整的代码如下:


    
    
      
      Hello React!
      
      
      
    
    
      

大家可以直接粘贴上面代码,保存在本地的一个test.html文件里,双击打开后,在浏览器里输出:

Hello, world!

我们看到

const element = 

Hello, world!

;

element变量的声明就是用了JSX语法,HTML语言直接写在JavaScript语言之中,不加任何引号。

注意:

script 标签的 type 属性为 text/babel,这是React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是在页面中直接使用 JSX 的地方,都要加上 type="text/babel"

一共用了三个库: react.js 、react-dom.js 和 browser.min.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能, browser.min.js的作用是将 JSX 语法转为 JavaScript 语法。

js构造dom

比如要创建一个dom超链接:

React

我们在原生DOM中,用js构造dom的方式是这样的:

var a = document.createElement("a")
a.setAttribute("class", "link")
a.setAttribute("href", "https://github.com/facebook/react")
a.appendChild(document.createTextNode("React"))

这个代码应该是大家比较熟悉的。当你在写代码的时候会不会感觉很繁琐呢,我们可以封装一下:

//第一个参数为node名
//第二个参数为一个对象,dom属性与事件都以键值对的形式书写
//第三个到第n个为子node,它们将按参数顺序出现,
//在这个例子中只有一个子元素,而且也是文本元素,所以可以直接书写,否则还得React.createElement一下
var a = React.createElement("a", {
    className: "link",
    href: "https://github.com/facebook/react"
}, "React")

看完这个代码,是不是感觉一下子要简洁的多。
现在有个编译工具,可以让你用html语法来写React.createElement,部署上线前编译回来。你愿意吗?
不管你的答案是什么,但这就是jsx的一半真相。

来看个直接的对比

前面已经回答过,在使用React的时候,可以不使用JSX,大概这样写:

var child1 = React.createElement("li", null, "First Text Content");
var child2 = React.createElement("li", null, "Second Text Content");
var root = React.createElement("ul", { className: "my-list" }, child1, child2);

使用这样的机制,我们完全可以用JavaScript构建完整的界面DOM树,正如我们可以用JavaScript创建真实DOM。但这样的代码可读性并不好,于是React发明了JSX利用我们熟悉的HTML语法来创建虚拟DOM:

var root =(
  
  • First Text Content
  • Second Text Content
);

总结

这两段代码是完全等价的,后者将XML语法直接加入到JavaScript代码中,让你能够高效的通过代码而不是模板来定义界面。

之后JSX通过翻译器转换到纯JavaScript再由浏览器执行。

注意

在实际开发中,JSX在产品打包阶段都已经编译成纯JavaScript,JSX的语法不会带来任何性能影响。
另外,由于JSX只是一种语法,因此JavaScript的关键字class, for等也不能出现在XML中,而要如例子中所示,使用className, htmlFor代替,这和原生DOM在JavaScript中的创建也是一致的。

相信大家在看完了上面的这些举例后,心中的疑问自然而然就迎刃而解了。

因此,JSX本身并不是什么高深的技术,可以说只是一个比较高级但很直观的语法糖。它非常有用,却不是一个必需品,没有JSX的React也可以正常工作:只要你乐意用JavaScript代码去创建这些虚拟DOM元素。

为什么使用JSX 抛出疑问

看了上面的这些简单的demo,大家肯定会抛出这样的疑问:

为什么React官方推荐使用JSX呢?

等等。。。

使用React,不一定非要使用JSX语法,可以使用原生的JS进行开发。
但是React作者强烈建议我们使用JSX,因为:

JSX在定义类似HTML这种树形结构时,十分的简单明了。

简明的代码结构更利于开发和维护。

XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读。

可能说这些你会感觉比较模糊,下面来举几个看得见的例子。

前端界面的最基本功能在于展现数据,为此大多数框架都使用了模板引擎,

在AngularJS中:
Welcome back, {{person.firstName}} {{person.lastName}}!
Please log in.
在EmberJS中:
{{#if person}}
  Welcome back, {{person.firstName}} {{person.lastName}}!
{{else}}
  Please log in.
{{/if}}
总结

模板可以直观的定义UI来展现Model中的数据,你不必手动的去拼出一个很长的HTML字符串,几乎每种框架都有自己的模板引擎。

传统MVC框架强调界面展示逻辑和业务逻辑的分离,因此为了应对复杂的展示逻辑需求,这些模板引擎几乎都不可避免的需要发展成一门独立的语言。

如上面代码所示,每个框架都有自己的模板语言语法。而这无疑增加了框架的门槛和复杂度。

使用JSX
正因为如此,React直接放弃了模板而发明了JSX。看上去很像模板语言,但其本质是通过代码来构建界面,这使得我们不再需要掌握一门新的语言就可以直观的去定义用户界面:掌握了JavaScript就已经掌握了JSX。

这里不妨再引用之前文章举过的例子,在展示一个列表时,模板语言通常提供名为Repeat的语法,例如在Angular中:

  • {{todo.text}}

而使用JSX,则代码如下:

var lis = this.todoList.todos.map(function (todo) {
  return  (
    
  • {todo.text}
  • ); }); var ul = (
      {lis}
    );

    可以看到,JSX完美利用了JavaScript自带的语法和特性,我们只要记住HTML只是代码创建DOM的一种语法形式,就很容易理解JSX。
    而这种使用代码构建界面的方式,完全消除了业务逻辑和界面元素之间的隔阂,让代码更加直观和易于维护。

    JSX的语法

    你可以用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中。
    例如,2 + 2, user.firstName, 和 formatName(user),这些都是可用的表达式。

    function formatName(user) {
      return user.firstName + " " + user.lastName;
    }
    
    const user = {
      firstName: "Harper",
      lastName: "Perez"
    };
    
    const element = (
      

    Hello, {formatName(user)}!

    ); ReactDOM.render( element, document.getElementById("root") );
    JSX 也是一个表达式

    编译之后,JSX 表达式就变成了常规的 JavaScript 对象。

    这意味着你可以在 if 语句或者是 for 循环中使用 JSX,用它给变量赋值,当做参数接收,或者作为函数的返回值。

    function getGreeting(user) {
      if (user) {
        return 

    Hello, {formatName(user)}!

    ; } return

    Hello, Stranger.

    ; }
    用 JSX 指定属性值

    您可以使用双引号来指定字符串字面量作为属性值:

    const element = 
    ;

    您也可以用花括号嵌入一个 JavaScript 表达式作为属性值:

    const element = 立即闭合它:

    const element = ;

    JSX 标签可能包含子元素:

    const element = (
      

    Hello!

    Good to see you here.

    );
    JSX 防止注入攻击

    在JSX中嵌入用户输入是安全的:

    const title = response.potentiallyMaliciousInput;
    // This is safe:
    const element = 

    {title}

    ;

    默认情况下, 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值。
    从而保证用户无法注入任何应用之外的代码。
    在被渲染之前,所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。

    JSX 表示对象

    Babel 将JSX编译成 React.createElement() 调用。

    下面的两个例子是是完全相同的:

    const element = (
      

    Hello, world!

    );
    const element = React.createElement(
      "h1",
      {className: "greeting"},
      "Hello, world!"
    );

    React.createElement() 会执行一些检查来帮助你编写没有bug的代码,但基本上它会创建一个如下所示的对象:

    // 注意: 这是简化的结构
    const element = {
      type: "h1",
      props: {
        className: "greeting",
        children: "Hello, world"
      }
    };
    结尾

    关于JSX的介绍大概讲到这里,看完这篇文章后,希望大家能能够了解什么是JSX,React为什么推荐使用JSX等问题。
    在下一节中来探索如何将 React 元素渲染到 DOM 上。
    欢迎大家访问我的blog,有更精彩的文章吆!
    参考链接

    https://facebook.github.io/re...

    http://www.css88.com/react/do...

    http://www.infoq.com/cn/artic...

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/82871.html

    相关文章

    • React 328道最全面试题(持续更新)

      摘要:希望大家在这浮夸的前端圈里,保持冷静,坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些React相前的面试题,受到大家的邀请,我又找了20多个React的使用者,他们给出了328道React的面试题,由我整理好发给大家,同时发布在了前端面试每日3+1的React专题,希望对大家有所帮助,同时大...

      kumfo 评论0 收藏0
    • TypeScript极速完全入门-3ts结合react进行项目开发

      摘要:前面我们已经说了大部分的核心内容,接下来我们就说说如何用开发实际项目。因为和结合很紧密,资料也很多,而且我会找机会专门说下这方面的知识,所以我们将重点放到如何用结合上来。所以前面打牢基础,现在我们开始实际组建工作流。 前面我们已经说了大部分typescript的核心内容,接下来我们就说说如何用typescript开发实际项目。 因为angular和typescript结合很紧密,资料也...

      arashicage 评论0 收藏0
    • 认识React

      摘要:认识准备写有两种方式通过通过写起来感觉会更方便,但就需要用进行编译了。组件的两个重要对象就是一个组件模板的数据对象。当一个组件进行了登录之后,应该通知其他需要更新登录信息的组件。 认识React 准备 babel-cli 写 React 有两种方式: 通过 jsx 通过 js jsx 写起来感觉会更方便,但就需要用babel进行编译了。 用babel编译 React 的 jsx 有...

      noONE 评论0 收藏0
    • 使用React 应当注意几个地方

      摘要:都会造成错误,注意一定一定严格的用,所以我建议直接复制我的。因为用的话他会转义代码,写不写其实一个样。不可避免的,构建肯定是要用到的。这个时候一般用的是在外面保存然后里面调用第二个坑更隐蔽。 目标人群 献给熟悉基础的React语法的刚接触React的同学~ 如果你已经写过半年以上的React那也不用看了,毕竟我水平并不高 Whats React React 是一个不存在的网络公司Fac...

      高璐 评论0 收藏0
    • React项目从Javascript到Typescript迁移经验总结

      摘要:面对越来越火的,我们公司今年也逐渐开始拥抱。综上所述,我个人觉得是要删除相关的东西,降低项目复杂度。但是有一个例外情况。这个配置项有三个值可选择,分别是和。模式会生成,在使用前不需要再进行转换操作了,输出文件的扩展名为。 抛转引用 现在越来越多的项目放弃了javascript,而选择拥抱了typescript,就比如我们熟知的ant-design就是其中之一。面对越来越火的typesc...

      zhisheng 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <