这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
什么是jsx语法？
- JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法
- 于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用
- 同于Vue中的模块语法，你不需要专门学习模块语法中的一些指令（比如v-for、v-if、v-else、v-bind）
jsx书写规范
- X的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div原生（或者使用后面我们学习的Fragment）
- 方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写
- SX中的标签可以是单标签，也可以是双标签
- 注意：签，必须以/>结尾
jsx使用
jsx嵌入变量
- 情况一：当变量是Number、String、Array类型时，可以直接显示
- 况二：当变量是null、undefined、Boolean类型时，内容为空；
- 况三：对象类型不能作为子元素（not valid as a React child）
jsx嵌入表达式
- 运算表达式
- 三元运算符
- 执行一个函数
react事件绑定
- React中的事件监听，这里主要有两点不同
- eact 事件的命名采用小驼峰式（camelCase），而不是纯小写
- 我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行；
this绑定问题
- 在事件执行后，我们可能需要获取当前类的对象中相关的属性，这个时候需要用到this
- 如果我们这里直接打印this，也会发现它是一个undefined
- 为什么是undefined呢？
- 原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数
- 如何解决this的问题呢？
- bind给btnClick显示绑定this
- 使用 ES6 class fields 语法
- 事件监听时传入箭头函数 （本人使用的这种方法）
react条件渲染
- 条件判断语句
- 三元运算
- 与运算符&&
jsx本质
- 源码位置 packages -> react -> src -> ReactElement.js -> createElement
createElement需要传递三个参数：
-
参数一：type
- 当前ReactElement的类型；
- 如果是标签元素，那么就使用字符串表示 “div”
- 如果是组件元素，那么就直接使用组件的名称
-
参数二：config
- 所有jsx中的属性都在config中以对象的属性和值的形式存储
-
参数三：children
- 存放在标签中的内容，以children数组的方式进行存储
