我对jsx的理解

主要来源react官方文档中JSX简介、深入JSX部分和网络搜索，自己看了一遍，把觉得理解的复制或者总结过里啊。第一次写，不求写得好，只有一个小目标，坚持写。

引申知识：

1、首先分清语句和表达式的区别 （待写）

2、react元素

• 元素是构成react的最小单位，它是组成虚拟DOM的一个对象；react依靠React.DOM api更新DOM，使其与这些虚拟DOM保持一致，而JSX就是生成react元素的一种js的语法扩展。
• react元素可以是自定义标签<div />，也可以是用户自定义组件<Welcome name="sara" />。

3、虚拟DOM

• 虚拟DOM是一个js对象，它与真实DOM一一对应，如果页面结构发生变化，会更新虚拟DOM，通过对比虚拟DOM 和真实DOM之间的差异，再决定是否更新页面真实DOM。

关于JSX：

一、什么是JSX

• jsx是快速生成react元素的一种语法，实际是React.createElement(component, props, ...children) 的语法糖。
• 是js的语法扩展，包含所有js功能

二、为什么使用JSX

它可以很好的描述页面html结构，很方便的在js中写html代码，并具有js的全部功能。

三、JSX用法

• JSX只能有一个根元素；JSX标签必须是闭合的，如果没有内容可以写成自闭和的形式<div />
• 可以在jsx通过{}嵌入js表达式。
• JSX会被babel转换成React.createElement的函数调用，调用后会创建一个miaoshu HTML信息的js对象。
  • 如下，react通过读取这些对象，使用他们来构建DOM并保持随时更新。注意：这是简化过的结构。

    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world!'
      }
    };
    

  • 因为jsx最终会创建对象结构，这些对象就是react元素。因此可以将jsx赋值给一个变量，我理解可以像对象那样使用jsx，比如在if和for循环中使用jsx，也可以把jsx当做函数参数或者函数的返回值。
• JSX中的子元素
  • 字符串字面量
  • jsx元素
  • 存储在数组中的一组元素
  • js表达式（可与其他类型子元素混用；可用于展示任意长度的列表）
  • 函数
  • boolean/null/undefined将会被忽略，如果使用&&运算符，确保前面的是布尔值，如果是0则会被渲染出来
• 在对象属性中定义react组件，可以使用object的点语法使用该组件。

四、指定React元素类型

• react元素会被转换为调用React.createElement函数，参数是组件，因此React和该组件必须在作用域内。
• react元素需要大写字母开头，或者将元素赋值给大小字母开头的变量；小写字母将被认为是html标签。
• 不能使用表达式作为react元素类型，需要先将其赋值给大写字母开头的变量，再把该变量作为组件。

五、JSX中的props

• js表达式作为props；语句不能作为props，可以用在jsx以外的代码中
• 字符串props
• 如果不给props赋值，默认值为true
• 属性展开，可以用于传递所有props，也可以用于接收特定props再将其剩余其他的传递给子组件，比较灵活。