资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息

React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息

ChanceWong / 1625人阅读

摘要：上面的代码小书经过编译以后会变成小书会构建一个对象里描述你结构的信息，包括标签名属性还有子元素等。第二个原因是，有了这样一个对象。负责把这个用来描述信息的对象变成元素，并且渲染到面上。下一节中我们将介绍小书组件的方法。

React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息 
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson6

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式。把 src/index.js 中的代码改成：

import React, { Component } from "react"
import ReactDOM from "react-dom"
import "./index.css"

class Header extends Component {
  render () {
    return (
      

        
React 小书

      

    )
  }
}

ReactDOM.render(
  
,
  document.getElementById("root")
)

我们在文件头部从 react 的包当中引入了 React 和 React.js 的组件父类 Component。记住，只要你要写 React.js 组件，那么就必须要引入这两个东西。

ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。你可以发现它是从 react-dom 中引入的，而不是从 react 引入。有些朋友可能会疑惑，为什么不把这些东西都包含在 react 包当中呢？我们稍后会回答这个问题。

接下来的代码你看起来会比较熟悉，但又会有点陌生。你看其实它跟我们前几节里面讲的内容其实很类似，一个组件继承 Component 类，有一个 render 方法，并且把这个组件的 HTML 结构返回；这里 return 的东西就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。你也许会说，这不就有语法错误了么？这完全不是合法的 JavaScript 代码。这种看起来“在 JavaScript 写的标签的”语法叫 JSX。

JSX 原理

为了让大家深刻理解 JSX 的含义。有必要简单介绍了一下 JSX 稍微底层的运作原理，这样大家可以更加深刻理解 JSX 到底是什么东西，为什么要有这种语法，它是经过怎么样的转化变成页面的元素的。

思考一个问题：如何用 JavaScript 对象来表现一个 DOM 元素的结构，举个例子：


  
Hello

每个 DOM 元素的结构都可以用 JavaScript 的对象来表示。你会发现一个 DOM 元素包含的信息其实只有三个：标签名，属性，子元素。

所以其实上面这个 HTML 所有的信息我们都可以用合法的 JavaScript 对象来表示：

{
  tag: "div",
  attrs: { className: "box", id: "content"},
  children: [
    {
      tag: "div",
      arrts: { className: "title" },
      children: ["Hello"]
    },
    {
      tag: "button",
      attrs: null,
      children: ["Click"]
    }
  ]
}

你会发现，HTML 的信息和 JavaScript 所包含的结构和信息其实是一样的，我们可以用 JavaScript 对象来描述所有能用 HTML 表示的 UI 信息。但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。

于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。

上面的代码：

import React, { Component } from "react"
import ReactDOM from "react-dom"
import "./index.css"

class Header extends Component {
  render () {
    return (
      

        
React 小书

      

    )
  }
}

ReactDOM.render(
  
,
  document.getElementById("root")
)

经过编译以后会变成：

import React, { Component } from "react"
import ReactDOM from "react-dom"
import "./index.css"

class Header extends Component {
  render () {
    return (
     React.createElement(
        "div",
        null,
        React.createElement(
          "h1",
          { className: "title" },
          "React 小书"
        )
      )
    )
  }
}

ReactDOM.render(
  React.createElement(Header, null), 
  document.getElementById("root")
);

React.createElement 会构建一个对象里描述你 HTML 结构的信息，包括标签名、属性、还有子元素等。这样的代码就是合法的 JavaScript 代码了。所以使用 React 和 JSX 的时候一定要经过编译的过程。

这里再重复一遍：所谓的 JSX 其实就是 JavaScript 对象。每当在 JavaScript 代码中看到这种 JSX 结构的时候，脑子里面就可以自动做转化，这样对你理解 React.js 的组件写法很有好处。

有了这个表示 HTML 结构和信息的对象以后，就可以拿去构造真正的 DOM 元素，然后把这个 DOM 元素塞到页面上。这也是我们最后一段代码中 ReactDOM.render 所干的事情：

ReactDOM.render(
  
,
  document.getElementById("root")
)

ReactDOM.render 功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上（在这里是 id 为 root 的 div 元素）。

所以可以总结一下从 JSX 到页面到底经过了什么样的过程：

有些同学可能会问，为什么不直接从 JSX 直接渲染构造 DOM 结构，而是要经过中间这么一层呢？

第一个原因是，当我们拿到一个表示 UI 的结构和信息的对象以后，不一定会把元素渲染到浏览器的普通页面上，我们有可能把这个结构渲染到 canvas 上，或者是手机 App 上。所以这也是为什么会要把 react-dom 多带带抽离出来的原因，可以想象有一个叫 react-canvas 可以帮我们把 UI 渲染到 canvas 上，或者是有一个叫 react-app 可以帮我们把它转换成原生的 App（实际上这玩意叫 ReactNative）。

第二个原因是，有了这样一个对象。当数据变化，需要更新组件的时候，就可以用比较快的算法操作这个 JavaScript 对象，而不用直接操作页面上的 DOM，这样可以尽量少的减少浏览器重排，极大地优化性能。这个在以后的章节中我们会提到。

总结

要记住几个点：

JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。

React.js 可以用 JSX 来描述你的组件长什么样的。

JSX 在编译的时候会变成相应的 JavaScript 对象描述。

react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到面上。

下一节中我们将介绍《React.js 小书 Lesson7 - 组件的 render 方法》。

私有云 idc机房托管 html里使用jsx React.js react.js cdn 小书

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

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

相关文章

  • React.js 小书 Lesson5 - React.js 基本环境安装

    摘要：工具地址在安装之前要确认你的机器上安装了环境包括。安装好环境以后，只需要按照官网的指引安装即可。所以可以把的源改成国内的的源，这样会加速下载过程。接下来我们会探讨的组件的基本写法小书使用描述信息。 React.js 小书 Lesson5 - React.js 基本环境安装 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson5 ...

    zilu 评论0 收藏0

  • 写一本关于 React.js 的小书

    摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书 本文作者：胡子大哈本文原文：React.js 小书 转载请注明出处，保留原文链接以及作者信息 在线阅读：http://huzi...

    Scorpion 评论0 收藏0

  • 2017-09-16 前端日报

    摘要：前端日报精选深入理解绑定请使用千位分隔符逗号表示网页中的大数字跨页面通信的各种姿势你所不知道的滤镜技巧与细节代码质量管控复杂度检测中文翻译基于与的三种代码分割范式掘金系列如何构建应用程序冷星的前端杂货铺第期美团旅行前端技术体系 2017-09-16 前端日报 精选 深入理解 js this 绑定请使用千位分隔符(逗号)表示web网页中的大数字跨页面通信的各种姿势你所不知道的 CSS 滤...

    cheng10 评论0 收藏0

  • React.js 小书 Lesson7 - 组件的 render 方法

    摘要：一个组件类必须要实现一个方法，这个方法必须要返回一个元素。你也可以把它改成，它就会显示小书。注意，直接使用在的元素上添加类名如这种方式是不合法的。现在页面上是显示小书。下一节中我们将介绍小书组件的组合嵌套和组件树。 React.js 小书 Lesson7 - 组件的 render 方法 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...

    Near_Li 评论0 收藏0

  • React.js 小书 Lesson22 - props.children 和容器类组件

    摘要：由于会把插入表达式里面数组中的一个个罗列下来显示。这样通过这个布局组件，就可以在各个地方高度复用我们的布局。嵌套的结构在组件内部都可以通过获取到，这种组件编写方式在编写容器类型的组件当中非常有用。下一节中我们将介绍小书和属性。 React.js 小书 Lesson22 - props.children 和容器类组件 本文作者：胡子大哈本文原文：http://huziketang.co...

    番茄西红柿 评论0 收藏0

发表评论

登陆后可评论

0条评论

ChanceWong

男|高级讲师
我要私信

TA的文章

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