JSX & Virtual Dom

jsx

const element = <div>1123</div>
const countNode = <div> { 1 + 2 } </div>

一个标签节点可以复制给一个变量。是js的语法扩展

jsx可以很好的描述ui应该呈现出它应有的交互的本质形式，方便的表述页面中的具体ui

jsx可以写js表达式。jsx会被转译成React.createElement()的返回值，是一个ReactElement 是一个js对象

let el = {
    $$typeof: REACT_ELEMENT_TYPE,
       // jsx 类型
    type: type,
      // 需要的key值
    key: key,
      // 对jsx对象的引用
    ref: ref,
    props: props,
    // 原生dom节点
    _owner: owner,
  };

jsx是createElement方法的语法糖，由babel编译。

在使用jsx的时候必须引入React, 但在后续版本不需要，会被默认导入JSX对象，编译为JSX.createElement()

在jsx中false null undefined true 是合法的，但不会被渲染出来，可以转为字符串。 在使用条件jsx元素时要保证，表达式总是布尔值

Virtual Dom

在此之前都是直接操作dom，告诉浏览器怎么干，存在的问题就是大量的代码被用于操作dom元素，且可读性差，而对比模版引擎更是直接替换掉页面中的dom树。

jquery可以更舒服的去操作dom，但是不能解决大量dom操作导致的性能问题，和带来的压力

虚拟dom本质上是js对象， 是js对象和真实dom直接的一个映射缓存。 是一个能够描述dom结构及其属性信息的js对象。是一种编程，页面UI以一种理想化的形式被保存在内存中。

性能问题

假设操作了10次dom，会引起回流或者重绘，可能第一次修改不哦被第二次第三次紧接着修改覆盖掉。

所以有了这个对象，修改后的会被记录下来，重新计算dom结构中需要更新的dom节点。页面的变化会优先作用与虚拟dom，而后借助差量更新，尽可能的减少dom操作

虚拟dom可能不是最好的性能优化手段，但对于现在的界面交互来说，局部更新可能是最优的解决方法

跨平台的问题

虚拟dom在web平台由js对象标识，来描述一个ui在视图中的样子，更具有抽象性

对于不同的平台，只需要使用不同的渲染器就可以完成跨平台的应用

研发体验

react的虚拟dom树，是多个jsx对象的组合，而jsx是一个语法糖，是一个js的语法扩展。建议在react中配合使用jsx，jsx可以很好的描述UI。js和html的结合，在dom节点中写js表达式，写起来更加方便更灵活。

在js代码中将jsx和UI放在一起时，会在视觉上有辅助作用，而使用jsx构建页面，文档结构更为清晰，方法可以点过去㊙️
…