react 基本语法
介绍
react 是一个用于构建用户界面的 JavaScript 库。是和 vue 类似的前端框架，也有一些相似的地方。用于基于UI组件构建用户界面。
React的特点：
- 组件化：React将UI拆分为独立、可重用的组件，每个组件都有自己的逻辑和控制。
- 声明式编程：React采用声明式编程范式，开发人员只需描述应用的每个状态下的UI，React会自动处理UI的更新。
- 虚拟DOM：React使用虚拟DOM来提高性能，通过对比虚拟DOM的变化，最小化实际DOM操作。
- 高效的状态管理：React通过状态（State）和属性（Props）来管理数据，确保数据流动的单向性。
创建项目
- 可以使用官方脚手架 create-react-app 创建项目（基于 webpack 构建）。
- 使用 vite 创建项目。
基本语法
1. 渲染模板语法和注释
react 中的模板语法与 vue 不同，并没有使用大胡子语法，而是使用 JSX 语法。只用了一个 {} 来包裹 JS 代码或者需要渲染的变量。
tsx
import { useState } from "react";
export const DemoRenderComment = (): JSX.Element => {
const [name,setName] = useState("qqq");
return (
<div>
<h1>{name}</h1>
{/* <AButton onClick={() => setName("www")}>修改name</AButton> */} // 这是 JSX 内部的 单行注释
</div>
);
};注释: {/* 这是 JSX 内部的单行注释 */} 不过在我看来，任何代码的注释都不需要特别记忆，在 vscode 中可以直接用 ctrl + / 来生成对应代码的注释，使用几次也就知道注释的方式了，当然在实际书写中也大概是用这个快捷键生成更好一点。
2. 条件渲染 和 循环渲染
react 中有两种方式进行条件渲染：
- 三目运算符
- if 语句
一般简单的直接使用三目运算符就可以了，但是对于复杂逻辑，if 语句会更清晰。
如果要控制类名 要使用 className 属性。
循环渲染一般用数组 map 方法进行。
tsx
import { useState } from "react";
export default function DemoRenderComment(): JSX.Element {
const [name, setName] = useState("qqq");
const [renderType, setRenderType] = useState("CAR");
const [isShow] = useState(true);
const dataList = [
{
name:"111",
age:12
},
{
name:"222",
age:13
},
{
name:"333",
age:14
}
]
return (
<>
{
renderType === "CAR" ? (
<>
<h1>{name}</h1>
<AButton onClick={() => setName("www")}>修改name</AButton>
<AButton onClick={() => setRenderType("CR")}>Condition Render</AButton>
</>
) : renderType === "CR" ?
(
<>
{isShow && <h1>{"条件渲染"}</h1>}
<AButton onClick={() => setRenderType("LR")}>Loop Render</AButton>
</>
):(
dataList.map((item) => (
<p key={item.name}>{item.name}</p>
))
)
}
</>
);
};3. () {}
小括号在 react 的渲染中主要是为了分组和提高可读性。
在 return 多个同级元素时如果不分组，会报错。
在写一些长的逻辑时，可以放在小括号中。提高代码的可读性。
大括号在 react 中主要是为了嵌入 js 表达式
在嵌入表达式时如果没有大括号会报错。
反过来，只要你需要嵌入 js 表达式的时候，都可以使用大括号，比如属性绑定变量值，事件绑定。
4. 事件绑定
绑定事件也是 js 的表达式，但是要注意绑定的事件，尽管跟原生事件类似，但是他用的是小驼峰命名事件。
tsx
<div onClick={() => {}}>Click Me</div>函数组件和类组件
可见独立行文。
函数组件的hooks
可见 react-hooks.
组件通信
可见独立行文，react 组件通信。
react 中使用 样式
1. 行内样式和类样式
tsx
import "./css-in-react.scss";
export default function CssInReact(): JSX.Element {
const style = {
color: "red"
}
return (
<div>
<h2>行内样式和类样式</h2>
<div style={{ color: "red" }}>
行内样式
</div>
<div style={style}>
行内样式
</div>
<div className="demo-css-style">
类样式
</div>
</div>
);
};类样式就是控制类名，当然这样引入的肯定是全局样式，性能比行内样式更高。
行内样式既可以是直接写的一个样式对象，也可以是写成的对象直接引入。
2. 模块化样式「module」
模块化样式，就是将样式文件写成 .module.[css|scss] 文件，然后引入的时候作为一个对象，对象中的属性就是类名。
tsx
import styles from "./demo.module.scss";
export default function CssInReact(): JSX.Element {
return (
<div>
<h2>模块样式</h2>
<div className={styles.container}>
模块样式
</div>
<button className={styles.button}>
模块样式按钮
</button>
</div>
);
};在 vite 为构建工具时，默认就开启了模块样式，所以不需要特殊配置。只需要安装 scss-loader 和相关的模块就可以了。
在 webpack 中，需要配置 module.rules。(create-react-app 默认使用的是 webpack)
js
module.exports = {
module: {
rules: [
{
test: /\.module\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: '[name]__[local]--[hash:base64:5]',
exportLocalsConvention: 'camelCase', // 将 kebab-case 转换为 camelCase
auto: true // 自动检测模块文件
},
importLoaders: 1 // 在 css-loader 之前应用的 loader 数量
}
},
{
loader: 'sass-loader',
options: {
// 可以添加 sass 选项
sassOptions: {
indentWidth: 2,
includePaths: ['src/styles']
}
}
}
]
}
]
}
};两个特殊的选择器：
- :global
:global(.className)，这样标记的类名，不会被模块化。 - :local
:local(.className)，这样标记的类名，会被模块化。(不常用)
3. css in js
这是一种思想，也一些实现了的库，主要是通过用 js 生成样式，然后插入到页面中。
4. 动态样式
我们可以使用一些布尔变量为组件设置对象类型的样式，随着布尔变量的改变，组件的样式也会改变。
这是非常常用的一种方式。