react中jsx语法以及组件的介绍

1. jsx 语法介绍

React 为方便 View 层组件化，承载了构建 HTML 结构化页面的职责，即提供了 JSX 语法糖。 JSX 将

XHTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。

在实际开发中， JSX 在产品打包阶段都已经编译成纯 JavaScript ，不会带来任何副作用，反而会让

代码更加直观并易于维护。

2. jsx 语法的相关注意事项

正确示例： 错误示例

2. jsx 语法实际上是 js+xhtml 的组合，因此要求单标签必须要闭合

3. 在 jsx 中要求 <img /> 标签必须要有 alt 属性，否则会有警告

4. 在 jsx 语法中为了防止和 js 相关关键字冲突，要求 class 必须要写成 className ， label 标签中的

for 属性必须要写成 htmlFor

JSX 语法的原理其实就是将我们写的 html 标签 通过 @babel/preset - react 插件编译成

createElement 方法，然后在转成 React 元素 ( 纯 js 对象 )

4. 声明式渲染

在 React 中用 {} 来渲染属性或者变量，这个 {} 就相当于是 js 的一个执行环境

属性渲染。 React 在对属性渲染的时候直接把要渲染的属性写在 {} 内就可以了

条件渲染

当我们想要让元素满足一定的条件时才渲染出来的时候，那么我们就可以使用条件渲染。 React 中

的条件渲染主要就是通过三目运算符或者短路运算符来完成。因为在单花括号中是可以表达式的

通过短路运算符来完成渲染

6. 循环渲染

React 中的循环渲染主要是通过数组的 map 方法来完成的

注意：

key 属性必须要有，且 key 属性的值必须是唯一的。所以最好使用 id 值来作为 key 属性的

值。

react 中的 key 属性就像是我们的身份证一样，是用来识别 react 中的组件或元素的。如

果 key 值相同可能会造成元素的渲染出现混乱

React 中的组件

1. class 组件 ( 有状态组件 )

React 创建组件的方式就是使用的类的继承， ES6 class 是目前官方推荐的使用方式，它使用了

ES6 标准语法来构建,vscode编辑器中快捷键是（rcc）

创建类组件的注意点：

我们创建的组件必须要继承 React.Component 这个父类

必须要有 render 方法

render 方法中必须要返回 React 元素 (JSX)

在 index.js 中引入这个组件

注意：组件名的首字母必须大写。这是为了和普通的 html 标签区别开

2. 函数组件 ( 无状态组件 )

函数组件又叫做无状态组件。定义一个函数组件其实就是在定义一个函数，建议使用箭头函数

vscode编辑器中快捷键是（rfc）

创建函数组件的注意点：

函数的首字母必须要大写 ( 这是规定，让别人能够区分这是一个组件并不是一个普通函

数 )

函数中必须要返回 React 元素 (JSX)

3. 有状态组件和无状态组件的区别

1. 有状态组件写起来比较复杂，性能相对较低；无状态组件写起来比较简单，性能相对较高

2. 有状态组件功能更全，可以在组件内部定义组件的状态；无状态组件功能相对简单，不能在组件的

内部定义组件的状态

4. 组件的样式

react中组件的样式分为行内样式，外部样式，css in js技术

如果想要处理一些简单的样式，则使用前两种样式即可

行内样式

想给虚拟 dom 添加行内样式，需要使用表达式传入样式对象的方式来实现。

React 推荐我们使用行内样式，因为 React 觉得每一个组件都是一个独立的整体

行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方。例如

render 函数里、组件原型上、外链 js 文件中

外链样式

将 css 样式写在一个单独的 css 文件中，然后在通过 import 导入

css in js 解决方案

css in js 解决方案其实就是将 css 样式写在 js 文件里面 的一种技术

现在比较热门的 css in js 解决方案的库有以下三种

aphrodite ：目前 github 上有 4k 的 star

radium ：目前 github 上有 6k 的 star

styled-components ：目前 github 上有 17k 多的 stat

使用方式，下面介绍 aphrodite 的使用方式。

1. 下载 aphrodite

npm install --save aphrodite

2. 在组件中使用

从上面 DevTools 可以看出我们定义的样式存在于 style 标签内，而且选择器名字是一串随

机的哈希字符串，这样其实实现了局部 CSS 作用域的效果（ scoping styles ），各个组件

的样式不会发生冲突

radium 使用

styled-components 使用

css module

将 css 的文件名改为： App.module.css , 这样做会为你这个 css 文件下所有的 id 名或者 class 名

添加一个随机的后缀名。这样就可以防止和其它的文件冲突了

全局处理

如果上述内容对你学习react有所帮助，请继续关注，后续我将会继续更新react的相关技术语法，如有不足，请需指出！！！