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的相关技术语法，如有不足，请需指出！！！