1. JSX的本质

jsx 仅仅只是React.createElement(component，props，…children)函数的语法糖
所有的jsx最终都会被转换成React.createElement的函数调用
createElement需要传递三个参数：

• 参数1：type
  • 当前ReactElement的类型
  • 如果是标签元素，那么就使用字符串表示“div”
  • 如果是组件元素，那么就直接使用组件的名称
• 参数2：config
  • 所有jsx中的属性都在config中以对象的属性和值的形式存储
• 参数3：children
  • 存放在标签中的内容，以children数组的方式进行存储
  • 当然，如果是多个元素呢？React内部有对它们进行处理

2. JSX的基本写法

<script type="text/babel">
  const element = (
      <div>
      <h2>我是标题</h2>
      <P>我是内容</P>
      </div>
  )
  // 将jsx元素进行渲染
  ReactDOM.render(element, doucment.getElementById("app"))
</srcipt>

3. JSX的babel转换

我们通过React.createElement最终创建出来一个ReactElement对象
这个ReactElement对象是什么作用呢？React为什么要创建它呢？

• 原因是React利用ReactElement对象组成了一个JavaScript的对象树
• JavaScript的对象树就是大名鼎鼎的虚拟DOM（Virtual DOM）

而ReactElement最终形成的树结构就是Virtual DOM

4. 为什么要使用虚拟DOM

为什么要采用虚拟DOM,而不是直接修改真实的DOM?

• 很难跟踪状态发生的改变:
• 操作真实DOM性能降低:

数组循环比较好用的API

// 数组循环新的api 
// for...of...  取出数组中的每一项数据
// for...in...  取出数组中的每一项数据的索引值
const todoList = ['吃饭', '睡觉', '打豆豆']
for (let item of todoList) {
    console.log("每一项的值", item) // "吃饭" "睡觉" "打豆豆"
}
// for...in... 数组的循环
for (let index in todoList) {
    console.log("每一项的索引值", index) // 0 1 2
}