【React】React 基础（2）

JSX 是什么

JSX是一种 JavaScript 的语法扩展(extension), 也在很多地方称之为 JavaScript XML, 因为看起就是一段XML语法。它用于描述我们的Ul界面，并且其完成可以和 JavaScript 融合在一起使用；

为什么 React 选择使用 jsx？

React 认为渲染逻辑本质上与其他 UI 存在内在耦合。也就是说 UI 需要绑定事件、展示数据，而在数据状态改变时，有需要更改UI 。因为 React 打算将他们放在一起，js in html => jsx 。

JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者 Fragment）；

• 为了方便阅读，我们通常在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（className，class是关键字会警告）
• 比如原生使用内联样式style（写成对象的形式）

props 传递组件

我们知道 props 可以传递数据，但实际上，组件也可以通过 props 进行传递。

如果使用 children 传递的话，如果嵌套多个子节点，children 会是一个子节点对象的数组；如果只有一个，那么children 是一个子节点的对象。

除了这样传递，还可以通过具体的属性名传递组件。

这样就是 React 中实现类似于 Vue 中插槽的作用。此外，还可以实现类似于作用域插槽的用法：

Vue 中的插槽用法完全通过 React 中的父子组件通信搞定，因此React 相较于 Vue 来说，灵活程度大大提升。

事件绑定

原生 DOM ：1. 获取DOM元素，添加监听事件。2. 原生 HTML 直接绑定 onclick。

React：事件命名采用小驼峰，传入一个事件处理函数，会在事件发生时被执行。

JSX 本质

实际上，jsx 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。

所有的jsx最终都会被转换成 React.createElement 的函数调用。

createElement需要传递三个参数：

• 参数一：type
   当前ReactElement的类型；
   如果是标签元素，那么就使用字符串表示 “div”；
   如果是组件元素，那么就直接使用组件的名称；
• 参数二：config
   所有jsx中的属性都在config中以对象的属性和值的形式存储；
   比如传入className作为元素的class；
• 参数三：children
   存放在标签中的内容，以children数组的方式进行存储；
   当然，如果是多个元素呢？React内部有对它们进行处理，可以通过 babeljs.io 中 try it out 查看转换后的代码 https://babeljs.io/repl/#?presets=react

所以，如果我们在代码中直接使用 babel 转换后的代码（全部改为 js 的写法），而不是 jsx 语法，一样可以正常开发。

React.createElement 最终返回一个 ReactElement 对象。这个对象组成了一个 js 对象树，也就是虚拟DOM。（可以通过打印上述 element 查看虚拟DOM 树的结构）

虚拟DOM帮助我们从命令式编程转到了声明式编程的模式。render 方法就是让 虚拟DOM 和真实 DOM 同步起来，这个过程叫做 协调。
构）

虚拟DOM帮助我们从命令式编程转到了声明式编程的模式。render 方法就是让 虚拟DOM 和真实 DOM 同步起来，这个过程叫做 协调。