编程课件-03_React的JSX语法解析.pdf
React基础–JSX语法
王红元coderwhy
目录
1认识JSX语法
content
2JSX的基本使用
3JSX的事件绑定
4JSX的条件渲染
5JSX的列表渲染
6JSX的原理和本质
coderwhy认识JSX
◼这段element变量的声明右侧赋值的标签语法是什么呢？
它不是一段字符串（因为没有使用引号包裹）；
它看起来是一段HTML元素，但是我们能在js中直接给一个变量赋值html吗？
其实是不可以的，如果我们将type=text/babel去除掉，那么就会出现语法错误；
它到底是什么呢？其实它是一段jsx的语法；
◼JSX是什么？
JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScriptXML，因为看起就是一段XML语法；
它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；
它不同于Vue中的模块语法，你不需要专门学习模块语法中的一些指令（比如v-for、v-if、v-else、v-bind）；
coderwhy为什么React选择了JSX
◼React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
比如UI需要绑定事件（button、a原生等等）；
比如UI中需要展示数据状态；
比如在某些状态发生改变时，又需要改变UI；
◼他们之间是密不可分，所以React没有将标记分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件（Component）；
当然，后面我们还是会继续学习更多组件相关的东西；
◼在这里，我们只需要知道，JSX其实是嵌入到JavaScript中的一种结构语法；
◼JSX的书写规范：
JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者使用后面我们学习的Fragment）；
为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
JSX中的标签可以是单标签，也可以是双标签；
✓注意：如果是单标签，必须以/结尾；
coderwhyJSX的使用
◼jsx中的注释
◼JSX嵌入变量作为子元素
情况一：当变量是Number、String、Array类型时，可以直接显示
情况二：当变量是null、undefined、Boolean类型时，内容为空；
✓如果希望可以显示null、undefined、Boolean，那么需要转成字符串；
✓转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；
情况三：Object对象类型不能作为子元素（notvalidasaReactchild）
◼JSX嵌入表达式
运算表达式
三元运算符
执行一个函数
coderwhyJSX的使用
◼jsx绑定属性
比如元素都会有title属性
比如img元素会有src属性
比如a元素会有href属性
比如元素可能需要绑定class
比如原生使用内联样式style
coderwhyReact事件绑定
◼如果原生DOM原生有一个监听事件，我们可以如何操作呢？
方式一：获取DOM原生，添加监听事件；
方式二：在HTML原生中，直接绑定onclick；
◼在React中是如何操作呢？