3、JSX的本质

JSX的本质：

JSX仅仅是React.createElement(component, props, …children)函数的语法糖
所有jsx最终都会被转换为React.createElement的函数调用

createElement传递三个参数：

createElement(type, config, children)
1、type：(当前ReactElement的类型，如果是标签元素就使用字符串表示，如 ‘div’，如果是组件元素就使用组件名)
2、config：（所有jsx中的属性都在config中以对象的属性和值得形式存储）
3、children：（存放在标签中，以children数组的方式进行存储，如果是多个参数，react内部有对它们进行处理）

React.createElement最终创建出来一个ReactElement对象
ReactElement对象的作用及为什么要创建它：

• React利用ReactElement对象组成一个javaScript对象树
• JavaScript的对象树就是虚拟DOM（Virtual DOM）
• jsx->createElement函数->ReactElement(对象树)->ReactDOM.render->真实的DOM

为什么采用虚拟DOM，不是直接修改真实的DOM？

1. 很难跟踪状态发生的改变：原有开发模式很难跟踪到状态发生的改变。不方便针对应用程序进行调试
2. 操作真实DOM性能较低：传统开发模式会进行频繁DOM操作，此做法性能非常低

频繁操作DOM的问题
DOM操作性能非常低：

1. 首先，document.createElement本身创建出来的就是一个非常复杂的对象
   https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement
2. 其次，DOM操作会引起浏览器的回流和重绘，所以开发中应避免频繁的DOM操作
   例：ul里包含五个li，如果想要在ul后追另外追加5个li
   答：

• 通过ul.appendChild(li)渲染到DOM上，进行了多次DOM操作，代码性能非常低
• 对于批量操作，最好的办法不是一次次修改DOM，而是对批量操作进行合并（例如通过 DocumentFragment【片段】进行合并）
• React正是通过Virtual DOM来帮助解决上面的问题

声明式编程：

虚拟DOM实现了从命令式编程转到声明式编程的模式
React官方说法：Virtual DOM是一种编程理念
1、在这个理念中，UI以一种理想化或者说是一种虚拟化的方式保存在内存中，并且它是一个相对简单的JavaScript对象
2、我们可以通过ReactDOM.render让虚拟DOM和真实DOM同步，该过程叫做协调（Reconciliation）
React设计原则：state中数据的不可变性