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