Virtual Dom & JSX

Virtual Dom

一、什么是 Virtual Dom

本质就是一个 js 对象，这个对象就是更加轻量级的、对真实 DOM 的一个描述

二、为什么需要 Virtual Dom

• 从下面的图片可以看出一个真实 dom 节点所包含的内容（或成员）是非常多的，意味着我们每次操作真实 dom 时的成本是非常高的

• 再来看虚拟 dom , 显然虚拟 dom 所包含的内容要比真实 dom 少了许多，因此我们操作 虚拟dom 的开销要比操作 真实dom 小很多
  

• 虚拟 dom 带来的优点
  • 虚拟dom 可以维护程序的状态，跟踪上一次的状态
  • 通过比较前后两次状态的差异来更新真实 dom

三、Virtual Dom 的作用

• 维护视图和状态的关系
• 复杂视图情况下, 有助于提升渲染性能
• 除了渲染真实 dom 以外，还可以实现 SSR(Nuxt.js/Next.js)、原生应用(Weex/React Native)、小程序(mpvue/unit-app)等

JSX

一、JSX 是什么

JSX 即 JavaScript XML , 是 js 的扩展语法，它允许我们可以在 js 中使用类似于像 html 的模板. 如：

 const jsx = <div>Hello world</div>;

二、使用 JSX 的好处

• 更加语义化 — JSX 将 JavaScript代码转换为更加语义化、更加有意义的标签
• 更加直观

• 抽象化 — 上面的 js 写法可能会因为 React 版本 不同造成，但是 JSX 提供的抽象能力能让我们无需修改任何代码
• 关注点分离
  • HTML 和 JS 代码一起组成一个独立的组件，并把所有的逻辑和标签封装在其中，我们只需要关注每一个独立的组件
  • JSX 以干净且简洁的方式保证了组件中的标签和所有业务逻辑的相互分离
  • JSX 不仅提供了一个清晰、直观的方式来描述组件树，同时还让你的应用程序更加符合逻辑

三、关于 React 的引入

• react 17 之前 —— JSX 仅仅只是 React.createElement(component, props, ...children)函数的语法糖, 所以在只要我们需要使用到 JSX 语法，我们都必须手动引入 React

• react 17 之后 —— 提供一个全新版本的 JSX 转换, 我们不需要在强制引入 react
  • react/jsx-runtime 和 react/jsx-dev-runtime 中的函数只能由编译器转换使用, 如果需要在代码中手动创建元素，可以选择使用 React.createElement