深刻理解React（一）JSX与虚拟DOM

时间 2019-11-30

标签深刻理解 react jsx 虚拟 dom 栏目 React 繁體版

原文原文链接

初衷

使用 React 有一段时间了，一直想找个时间写一个 React 的系列文章。忙里抽闲，完成了第一篇。写这系列文章的初衷是总结这段时间的技术学习，以及给那些想学习 React 的同窗们一点帮助。我会尽可能以通俗易懂的语言阐述我对 React 的理解，但愿能照顾到更多的新手。相信你们应该都明白一个道理，最可以带领你进步的，并非比你强不少不少的大牛，而是恰好比你走得快那么一步的脚印。javascript

为何是React

这是2018年现代前端框架的使用状况统计，图片来自 JavaScript 如日中天，2018趋势报告来啦！，数据仅供参考。能够看到这是个前端框架三足鼎立的时代，选择 React 并非由于其余框架不够好，而是 React 自己有其独特的魅力，吸引着开发者的汇集。就比如喜欢一我的，并非由于其余人很差才喜欢他，而是被他独特的魅力所吸引才产生了感情。因此对新手来讲，大可没必要太过纠结于框架的选择，框架只是个帮助咱们开发的工具而已。你只须要知道，React 自己足够强大，可以让你在大前端的世界里走的更远！

Hello World

咱们从最简单的 Hello World 开始，进入 React 的世界，使用的是最新的 React 16版本。html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
  
  // 引入react及react-dom库
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  // 引入babel
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

  // 在babel编译的环境下执行
  <script type="text/babel">
    const vDom = <h1>Hello World</h1>
    const root = document.getElementById('root')
    ReactDOM.render(vDom, root)
  </script>
</body>

</html>
复制代码

在使用 React 以前，咱们须要先引入 React 相关的 js 库。前端

react.development.js 这是 React 的核心库，用于构建页面 UI
react-dom.development.js 这是 React 的 DOM 相关操做库，能够将你构建的 UI 渲染到浏览器中

除此以外，还需引入 babel 进行语法解析转换。java

咱们来详细解析下上面的 demo，其实 script 标签中一共就写了3句代码，但其中包含了 React 的核心知识点——虚拟 DOM 和 JSX 。react

<script type="text/babel">
    const vDom = <h1>Hello World</h1>
    const root = document.getElementById('root')
    ReactDOM.render(vDom, root)
</script>
复制代码

JSX

JSX 是 React 的灵魂，全称 JavaScript XML。顾名思义，它可让你在 JS 中使用 XML 标记的方式去直接声明界面的 DOM，这是 React 独有的语法糖。git

请看 HelloWorld 的例子github

const vDom = <h1>Hello World</h1> // 建立h1标签，右边千万不能加引号
const root = document.getElementById('root') // 找到<div id="root"></div>节点
ReactDOM.render(vDom, root) // 把建立的h1标签渲染到root节点上
复制代码

这里咱们在 JS 里直接建立了一个<h1>Hello World</h1>标签，并赋值给 vDom，这就是 JSX 语法。
若是咱们将 react 库的引入注释掉算法

会发现浏览器中报错

缘由就是原生JS语法并不支持直接声明 DOM 标签，这是 JSX 的语法，须要 React.js 库的支持。

ReactDOM.render()这个是 react-dom 库中的方法，用于将你建立好的 HTML 模板(虚拟 DOM 节点)插入到某个节点上，并渲染到页面上。第一个参数是 HTML 模板，第二个参数是指定的 DOM 节点。浏览器

在上述 JSX 语法中有几个值得注意的地方：bash

右边的 h1 标签千万不能加引号。若是加上引号的，JS 引擎会将其解释为字符串类型。其实从本质来讲，<h1>Hello World</h1>这是一个对象，叫作虚拟 DOM 对象，后面会讲到。
<script> 标签的 type 属性为 text/babel。因为使用了 JSX 这种特殊的语法，咱们不能再像往常同样，使用<script type="text/javascript">来解析 JSX，而要借助 babel 来进行解析、转换成 JS。
将 JSX 语法转为 JavaScript 语法，这一步很消耗时间。因此如今前端项目，都会使用工做流的形式来构建，不会在 html 页面中直接引入 react、写 js 代码等等。

简单来讲，就是 JSX 赋予咱们在 JS 中直接建立 HTML 标签的能力，由于 HTML 标签实在是太弱小了。
固然咱们也能够不使用 JSX 的语法建立 DOM 节点，直接使用 React 给咱们提供的普通 JS 写法，React.createElement()API 来建立。

const vDom = React.createElement(
  'h1', // 第一个参数是标签名，例如h一、span、table...
  { className: 'hClass', id: 'hId' }, // 第二个参数是个对象，里面存着标签的一些属性，例如id、class等，由于class是保留字，因此要写成className的形式
  'hello world' // 第三个参数是节点中的文本
)
const root = document.getElementById('root')
ReactDOM.render(vDom, root)
复制代码

能够看到和以前的 JSX 写法const vDom = <h1>Hello World</h1>效果是同样的

在使用 React.createElement()这种写法时，咱们并不须要用 babel 进行解析，由于这自己就是 JS 的语法，JS 引擎能够解析。

其实本质上，JSX 就是为了简化直接调用 React.createElement() API 的一颗语法糖而已，他执行最终会被 babel 解析转换为 React.createElement()的形式，因此推荐使用 JSX 的语法来建立页面的 UI（也就是 HTML 的一些 DOM）。

JSX的优势

类 XML 语法结构清晰
加强 JS 语义
屏蔽 DOM 操做
···

咱们之前在操做时，须要通过如下流程
建立节点 -> 找到插入位置 -> 插入节点，如果还有子节点，还须要继续添加，一切都须要手动实现。
而使用 React 的 JSX 语法只须要const vDom = xxx 而后ReactDOM.render(vDom, root)就能够。
换句话说，之前都是过程式操做，你不只知道要作什么，还须要本身手动去实现。而如今变成了声明式操做，就比如在下命令同样，你只须要下命令建立怎样的 DOM 节点，而后下命令插入，中间的过程所有都由 React 框架帮你自动实现，让开发者能够彻底屏蔽 DOM 的操做。

JSX基本语法规则

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析
遇到代码块{}或括号()，就用 JavaScript 规则解析

咱们把 Hello World 的例子提高下

<script type="text/babel">
    let title = 'Hello World'
    const vDom = (
      <div>
        <h1>{title}</h1>
      </div>
    )
    const root = document.getElementById('root')
    ReactDOM.render(vDom, root)
</script>
复制代码

上述代码在执行时，当遇到<div>的左箭头括号时，使用 HTML 的解析规则，当遇到{title}时，采用 JS 的规则解析，也就是获取变量 title 的值。值得一提的是，若是须要建立嵌套的 HTML 结构，推荐使用()括号括起来。

虚拟DOM

咱们在写前端页面时，手动操做 DOM，繁琐又容易出错，在大规模应用下维护起来也很困难。
而且每次修改 DOM，浏览器的 DOM 树都须要重绘重排，效率十分低下。
既然 DOM 手动操做太繁琐且效率低下，那就在每次状态更新时从新渲染整个页面
每次都从新渲染整个页面效率十分低下，因此就加上一个虚拟 DOM
每次修改时，先在虚拟 DOM 上更新，最后在批量更新整个页面，这样页面只须要一次大的更新，效率很高

虚拟 DOM 是在 DOM 的基础上创建的一个抽象层，咱们对 DOM 中的数据和状态所作的任何改动，都会被自动且高效的同步到虚拟 DOM，最后再批量同步到 DOM 中。React 会在内存中维护一个虚拟 DOM 树，当咱们对这个树进行读或写的时候，其实是对虚拟 DOM 进行的。当数据变化时，React 会自动更新虚拟 DOM 树，而后拿新的虚拟 DOM 树和旧的虚拟 DOM 树进行对比(当中有 DOM diff算法，这个以后再说)，把不一样的虚拟节点放到一个队列里，最终在渲染时一次批量更新这些队列中的虚拟节点到真实 DOM 中，这是对 DOM 渲染效率上的一个质的提高。

一点小结

React 以 JS 为中心，以 JSX 的独特语法糖将"HTML"放到了 JS 里，而 JS 远比 HTML 要强大。所以，与其加强 HTML 让其拥有逻辑，不如加强 JS 让其支持标签化，这样一来既丰富了 JS 操控领域，又提高了页面渲染的性能。因此，你如果新手也不要紧，只要你 JS 能力足够强，相信必定能在 React 的世界里策马奔腾！

最后推荐几个 React 的社区
React 官方文档：react.docschina.org/
React China：react-china.org/
React 开源中国社区：www.oschina.net/translate/t…

个人 github 地址：github.com/FightingHao 若是有什么不懂的地方，欢迎评论，你们一块儿探讨 React 有关的知识！