虚拟dom
什么是Virtual DOM?
Virtual DOM是一种编程概念，在这个概念里，UI以一种理想化的，或者说“虚拟的”表现形式被保存在内存中，并通知reactDom等类库使之与“真实的”DOM同步，这一过程就叫协调。
这种方式赋予了react声明式的API:您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。
这使你可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作释放出来。
Shadow Dom和Virtual Dom是否是一回事？
他们不一样。
Shadow Dom是一种浏览器技术，主要用于在web组件中封装变量和css。
Virtual Dom则是一种由Javascript类库基于浏览器api实现的概念。
什么是“React Fiber”
Fiber是React16中新的协调引擎。
主要目的是使Virtual Dom可以进行增量式渲染。
DOM操作很慢，轻微的操作都可能导致页面重新排版，非常耗性能？
相对于DOM对象，js对象处理起来更快，而且更简单。通过diff算法对比新旧vdom之间的差异，可以批量的、最小化的执行dom操作，从而提高性能。
在哪里？
React中用JSX语法描述视图，通过babel-loader转译后它们变为React.createElement(...)形
式，
该函数将生成vdom来描述真实dom。
将来如果状态变化，vdom将作出相应变化，再通过diff算法
对比新老vdom区别从而做出最终dom操作。
JSX
什么是JSX
- 是个语法糖。
- React 使用 JSX 来替代常规的 JavaScript。
- JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
为什么需要JSX
- 开发效率：使用 JSX 编写模板简单快速。
- 执行效率：JSX编译为 JavaScript 代码后进行了优化，执行更快。
- 类型安全：在编译过程中就能发现错误。
原理
React 16原理：babel-loader会预编译JSX为React.createElement(...) 。
React 17原理：React 17中的 JSX 转换不会将 JSX 转换为 React.createElement，而是自动从 React 的 package 中引入新的入口函数并调用。另外此次升级不会改变 JSX 语法，旧的 JSX 转换 也将继续工作。
与Vue的区别
-
react中虚拟dom+jsx的设计一开始就有，vue则是演进过程中才出现的。
-
jsx本来就是js扩展，转义过程简单直接的多；vue把template编译为render函数的过程需要
-
复杂的编译器转换字符串-ast-js函数字符串。
