JSX语法

可能现在你对上面的代码不太了解，特别是怎么在JavaScrpt里面写HTML

  1. ReactDOM.render(<div>Hello React</div>, document.getElementById('root'));

这里的HTML就是JSX，JSX的全称是JavaScript XML，指的就是JavaScript中的XML。

上面这行语句的作用是什么呢? React会解析这个JSX语句为一个虚拟DOM，而ReactDOM会将这个虚拟DOM转变为真正的DOM，然后塞到页面某个特定的元素上面，这里是塞到一个id为root(该DOM元素在public/index.html中)的DOM对象中,我们查看index.html中的内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <!-- 省略head中的内容和所有注释 -->
  4.   <body>
  5.     <noscript>You need to enable JavaScript to run this app.</noscript>
  6.     <div id="root"></div>
  7.   </body>
  8. </html>

经过ReactDOM渲染后的index.html的页面应该为为

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <!-- 省略head中的内容和所有注释 -->
  4.   <body>
  5.     <noscript>You need to enable JavaScript to run this app.</noscript>
  6.     <div id="root">
  7.       <div>Hello React</div>
  8.     </div>
  9.   </body>
  10. </html>

为了验证这个想法，可以在刚才的页面中按下F12检查元素
JSX语法 - 图1
所以页面显示出来的就是Hello React。

为什么需要虚拟DOM： 原因很简单，那就是DOM很慢，我们先来看一下浏览器的渲染流程

  • 用HTML分析器，分析HTML元素，构建一颗DOM树
  • 用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表
  • 将上面的DOM树和样式表，关联起来，构建一颗Render树。这一过程又称为Attachment。每个DOM节点都有attach方法，接受样式信息，返回一个render对象（又名renderer）。这些render对象最终会被构建成一颗Render树
  • 有了Render树后，浏览器开始布局，会为每个Render树上的节点确定一个在显示屏上出现的精确坐标值
  • Render数有了，节点显示的位置坐标也有了，最后就是调用每个节点的paint方法，让它们显示出来

当你用传统的原生api或jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。比如当你在一次操作时，需要更新10个DOM节点，理想状态是一次性构建完DOM树，再执行后续操作。但浏览器没这么智能，收到第一个更新DOM请求后，并不知道后续还有9次更新操作，因此会马上执行流程，最终执行10次流程。显然例如计算DOM节点的坐标值等都是白白浪费性能，可能这次计算完，紧接着的下一个DOM更新请求，这个节点的坐标值就变了，前面的一次计算是无用功。 即使计算机硬件一直在更新迭代，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验。 虚拟DOM就是为了解决这个浏览器性能问题而被设计出来的。例如前面的例子，假如一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，通知浏览器去执行绘制工作，这样可以避免大量的无谓的计算量。

我们知道React中的JSX会被解析为一个React对象(或者说JavaScript对象)，所以我们在写JSX的过程中，就可以把JSX看做是一个对象(记住JSX的本质就是对象，每当在JavaScript代码中看到这种JSX结构的时候，脑子里面就可以自动做转化，这样对你理解React.js的组件写法很有好处)。这就意味着JSX只能有一个根元素，如下面的写法是错误的

  1. <div></div>
  2. <div></div>

因为上面的代码并不能被解析为一个对象，正确的写法应该是

  1. <div>
  2.     <div></div>
  3.     <div></div>
  4. </div>

这样的JSX才会被解析为一个对象。

现在我们在来说一下文件开头的两行语句

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';

在React中，我们使用import来导入npm下载的包，这里我们引入了React和ReactDOM，这里你可能有疑问，我们并没有使用npm下载react和react-dom，为什么能够引入，这是因为create-react-app为我们做了这件事情，打开package.json我们可以发现已经帮我们添加了react和react-dom
JSX语法 - 图2
那么引入的React是做什么事情的呢? 首先在JavaScript中是不能写JSX的，在React中的JSX会被解析为JavaScript对象，就是通过React来做到的，而ReactDOM是将React渲染的JSX对象(有时我们也称之为组件)转变为真正的DOM对象并塞到某个特定的元素里面。所以记住只要你写React.js组件，都必须要引入React。