1.JSX 到底是什么

使用React 就一定会写jsx,jsx到底是什么呢?它是一种JavaScript的语法扩展,React 使用它来描述用户界面长成什么呢样子的,尽管它看起来非常像JavaScript,在React代码执行之前,Babel会对JSX 编译成React API ,通过ReactAPI 转换成虚拟的dom,最后将虚拟的dom转成真实的dom

  1. <div className="container">
  2.   <h3>Hello React</h3>
  3.   <p>React is great </p>
  4. </div>
  1. React.createElement(
  2.   "div",
  3.   {
  4.     className: "container"
  5.   },
  6.   React.createElement("h3", null, "Hello React"),
  7.   React.createElement("p", null, "React is great")
  8. );

从两种语法对比来看，JSX 语法的出现是为了让 React 开发人员编写用户界面代码更加轻松。

2. DOM 操作问题

在现代 web 应用程序中使用 JavaScript 操作 DOM 是必不可少的，但遗憾的是它比其他大多数 JavaScript 操作要慢的多。
大多数 JavaScript 框架对于 DOM 的更新远远超过其必须进行的更新，从而使得这种缓慢操作变得更糟。
例如假设你有包含十个项目的列表，你仅仅更改了列表中的第一项，大多数 JavaScript 框架会重建整个列表，这比必要的工作要多十倍。
更新效率低下已经成为严重问题，为了解决这个问题，React 普及了一种叫做 Virtual DOM 的东西，Virtual DOM 出现的目的就是为了提高 JavaScript 操作 DOM 对象的效率。

3. 什么是 Virtual DOM

在 React 中，每个 DOM 对象都有一个对应的 Virtual DOM 对象，它是 DOM 对象的 JavaScript 对象表现形式，其实就是使用 JavaScript 对象来描述 DOM 对象信息，比如 DOM 对象的类型是什么，它身上有哪些属性，它拥有哪些子元素。
可以把 Virtual DOM 对象理解为 DOM 对象的副本，但是它不能直接显示在屏幕上。
下面JavaScript 对象来表现Virtual DOM 

  1. <div className="container">
  2.   <h3>Hello React</h3>
  3.   <p>React is great </p>
  4. </div>

执行计划

设置后续待办任务，可使用 @人分配执行人。

  • 待办任务1
  • 待办任务2