2、JSX基础讲解

认识JSX

<script type="text/babel">
	// jsx语法
	const element = <h2>Reacat</h2>
	
	ReactDOM.render(element, document.getElementById('app'))
</script>

1. 首先它不是一段字符串（因为没有使用引号包裹），其更像原生HTML
   在js中不可以直接给一个变量赋值html（将type=”text/babel”去掉会出现语法错误）
2. 以上片段代码，实际是一段jsx语法

什么是JSX?

1. jsx是一种JavaScript的语法拓展（extension），很多地方也称之为JavaScript
   XML(因为看起来就是一段XML语法)
2. jsx用于描述UI界面，并且可以和js融合在一起使用
3. 它不同于Vue中的模板语法，不需要专门学习模板语法中的指令（v-for、v-if、v-else、v-bind等）

为什么React选择了JSX?

1. react认为渲染逻辑本质上与其他UI逻辑存在内在耦合度
   例如UI需要绑定事件（button、a原生等）
   例如UI中需要展示数据状态，在某些状态发生改变时又需要改变UI
2. 它们之间密不可分、所以react没有将标记分到不同文件中，而是将它们组合到一起，这个地方就是组件（Component）

JSX的书写规范：

1. JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个原生div（或者是用后面学习的Fragment）
2. 为了方便阅读，通常在jsx的外层包裹一个小括号（），既方便阅读，又可以让jsx进行换行书写
3. JSX中的标签可以是单标签也可以是双标签（如果是单标签，必须以/>结尾）

JSX的使用：

1、JSX中的注释 {/**/}
2、JSX嵌入变量

• 当变量是Number、String、Array类型时，可以直接显示
• 当变量是null、undefined、Boolean类型时，内容为空
  • 可以希望显示null、undefined、Boolean，需要转成字符串
  • 转换方式很多，例如：toString方法、和空字符串拼接、String（变量）等方式
  • 对象类型不能作为子元素