一、认识JSX语法
认识JSX
这段element变量的声明右侧赋值的标签语法是什么呢？
- 它不是一段字符串(因为没有使用引号包裹)
- 它看起来是一段HTML元素，但是我们能在js中直接给一个变量赋值html吗？
- 不可以，如果我们将type=“text/babel”去除掉，那么就会出现语法错误；
- 这就是一段jsx语法
JSX是什么？
- JSX是一种JavaScript的语法拓展（eXtension）也在很多地方称为JavaScript XML因为看起来像一段XML语法
- 用于描述我们的UI界面，并且他可以可以和JavaScript融合在一起使用
- 它不同于Vue中的模板语法，你不需要专门学习模板语法中的指令。如v-for，v-if
为什么React选择了JSX
- React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
- 如 UI需要绑定事件
- 如 UI中需要展示数据状态
- 如 在某些状态发生改变时，又需要改变UI
- 他们之间是密不可分，所以React没有将标记分离到不同的文件中，而是将他们组合在一起，这个地方就是组件（Component）
- JSX其实就是嵌入到JavaScript中的一种语法；
JSX的书写规范
- JSX的顶层只能有一个根元素,所以我们很多时候在外层包裹一个div元素(或者Fragment)
- 为了方便阅读,通常会在jsx的外层包裹一个小括号()并且jsxk有进行换行书写
- JSX中的标签可以是单标签也可以是双标签
- 如果是单标签必须以/>结尾
二、JSX的基本使用
JSX的使用
- jsx中的注释
jsx嵌入变量作为子元素
- 当变量是Number,String,Array类型时,可以直接展示
- 当变量是null,undefined,Boolean类型时,内容为空
- 如果希望可以展示null,undefined,Boolean那么需要转成字符串
- 如 toString,空字符串拼接,String(变量)等...
- Object对象类型不能作为子元素(not valid as a React child)
- jsx嵌入表达式
- 运算表达式
- 三元表达式
- 执行一个函数
- jsx绑定属性
- 如元素都会有 title属性
- img元素会有 src属性
- a元素有 href属性
- 元素需要绑定 class
- 使用 内联样式style
三、JSX的事件绑定
React事件绑定
- 如果原生DOM原有一个监听事件,如何进行操作?
- 获取DOM原生,添加监听事件
- 在HTML原生中,直接绑定onclick
- 在React中如何操作呢?
- React事件的命名采用小驼峰,而不是纯小写
- 我们需要通过{}传入一个事件处理函数,这个函数会在事件发生时被执行;
this的绑定问题
- 在事件执行后,我们需要获取当前类的对象中相关的属性,这个时候需要用到this
- 如果直接打印this,会发现它是一个undefined
- 为什么是undefined?
- btnClick函数并不是我们主动调用的,而是当button发生改变时,React内部调用了btnClick函数
- 而它内部调用时,并不知道如何绑定正确的this
- 解决this问题
- bind给btnClick显示绑定this
- 使用ES6 class fields语法
- 事件监听时传入箭头函数
事件参数传递
- 在执行事件函数时,我们需要获取一些参数值,如 event对象,其他参数
- 获取event对象
- 很多时候我们需要拿到event对象做一些事情(阻止默认行为...)
- 默认情况下,event对象有被直接传入,函数就可以获取到event对象
- 获取更多的参数
- 我们需要获取更多的参数时,我们最好的方式是传入一个箭头函数,主动执行的事件函数,并传入参数
