+ export default component
}
diff --git a/docs/index.md b/docs/index.md
index ce664238..b9227d08 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,13 +13,22 @@ hero:
text: View on GitHub
link: https://github.com/ZiuChen
features:
- - icon: 🎓
- title: Electronic Information Major
- details: 电子信息工程
- - icon: 🎯
- title: JavaScript & TypeScript
- details: 自学前端 热爱技术
- - icon: 👆
- title: See more information
- details: 访问导航栏查看更多信息
+ - icon: 📋
+ title: Clipboard Manager
+ details: A Powerful clipboard management tool
+ - icon: ✍🏻
+ title: Super Markdown
+ details: Powerful Markdown editor
+ - icon: 🚗
+ title: JS Runner
+ details: Run JavaScript dynamicly in Browser/Node.js
+ - icon: 🔑
+ title: Bytemd Plugin
+ details: Bytemd Plugin Library
+ - icon: 🍬
+ title: ASOUL Browser Pet
+ details: Keep an A-SOUL member as a pet in your browser
+ - icon: 🔧
+ title: Typein
+ details: Typein text, quickly perform browser operations
---
\ No newline at end of file
diff --git a/docs/note/CSS.md b/docs/note/CSS.md
index 2245d393..37468f92 100644
--- a/docs/note/CSS.md
+++ b/docs/note/CSS.md
@@ -4,6 +4,8 @@ editLink: false
# CSS基础
+## 书写CSS代码的方式
+
CSS提供了三种方法，可以将CSS样式应用到元素上：
- 内联样式
@@ -730,6 +732,8 @@ HTML中的每个元素都可以看做是一个盒子，可以具备以下四个
- 定位的参照对象是视口（viewpoint）
- 当画布滚动时，固定不动
+**当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。**
+
- 视口（ViewPort）：文档的可视区域
- 画布（Canvas）：渲染文档的区域 文档内容超出视口范围 则可以滚动查看
- 画布 >= 视口
diff --git a/docs/note/Front-end Engineering.md b/docs/note/Front-end Engineering.md
index dde647b1..e9238b0d 100644
--- a/docs/note/Front-end Engineering.md
+++ b/docs/note/Front-end Engineering.md
@@ -35,7 +35,7 @@ Node.js是一个基于**V8 JavaScript引擎**的**JavaScript运行时环境**
- JavaScript代码 -> V8 -> Node.js Bindings -> LibUV
- LibUV是使用**C语言编写的库**，提供了**事件循环、文件系统读写、网络IO、线程池**等等内容
-
+
### Node.js的应用场景
@@ -635,7 +635,7 @@ ESModule的解析过程可以分为三个阶段：
- 运行代码，计算值，并且将值填充到内存地址中
- 将导入导出的**值**赋给对应的变量`name = 'Ziu'`
-
+
文章推荐：[ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
@@ -1001,7 +1001,7 @@ PNPM（performant npm）有以下优点：
- 符号链接 是一类特殊的文件
- 其包含有一条以绝对路径或者相对路径的形式**指向其他文件或者目录的引用**
-
+
操作系统使用不同的**文件系统**，**对真实的硬盘读写操作做了一层抽象**，借由文件系统，我们得以方便地操作和访问文件的真实数据
@@ -1055,7 +1055,7 @@ PNPM（performant npm）有以下优点：
- 在`node_modules/.pnpm`中，包含了附加版本信息的真实文件（硬链接到硬盘数据的文件）
- 所有间接依赖，都通过软链接的方式，链接到被铺平在`.pnpm`文件夹中对应版本的硬链接文件上
-
+
#### 常用命令
diff --git a/docs/note/Front-end Engineering.assets/esmodule-phases.png b/docs/note/Front-end-Engineering.assets/esmodule-phases.png
similarity index 100%
rename from docs/note/Front-end Engineering.assets/esmodule-phases.png
rename to docs/note/Front-end-Engineering.assets/esmodule-phases.png
diff --git a/docs/note/Front-end Engineering.assets/hard-link-and-soft-link.jpg b/docs/note/Front-end-Engineering.assets/hard-link-and-soft-link.jpg
similarity index 100%
rename from docs/note/Front-end Engineering.assets/hard-link-and-soft-link.jpg
rename to docs/note/Front-end-Engineering.assets/hard-link-and-soft-link.jpg
diff --git a/docs/note/Front-end Engineering.assets/how-pnpm-works.jpg b/docs/note/Front-end-Engineering.assets/how-pnpm-works.jpg
similarity index 100%
rename from docs/note/Front-end Engineering.assets/how-pnpm-works.jpg
rename to docs/note/Front-end-Engineering.assets/how-pnpm-works.jpg
diff --git a/docs/note/Front-end Engineering.assets/The Node.js System.jpeg b/docs/note/Front-end-Engineering.assets/the-node.js-system.jpeg
similarity index 100%
rename from docs/note/Front-end Engineering.assets/The Node.js System.jpeg
rename to docs/note/Front-end-Engineering.assets/the-node.js-system.jpeg
diff --git a/docs/note/MySQL.md b/docs/note/MySQL.md
new file mode 100644
index 00000000..21377f44
--- /dev/null
+++ b/docs/note/MySQL.md
@@ -0,0 +1,296 @@
+# MySQL
+
+## MySQL基础篇
+
+### MySQL简单使用
+
+在命令行窗口输入
+
+```sh
+mysql -uroot -p1234 -hlocalhost -P3306
+```
+
+指定用户名为 `root` 密码为 `1234` 连接host为 `localhost` 端口号为 `3306`
+
+除了以明文方式输入密码，也可以通过另一种方式登录：
+
+```sh
+mysql -u root -p
+1234
+```
+
+进入mysql命令行工具后，查看所有表：
+
+```sql
+show databases;
+```
+
+MySQL默认为我们创建了四个表` information_schema` `mysql` `performance_schema` `sys`
+
+创建一个新的数据库：
+
+```sql
+create database dbtest1;
+```
+
+使用数据库：
+
+```sql
+use dbtest1;
+```
+
+创建一张表，初始化`id`与`name`字段：
+
+```sql
+create table employees(id int, name varchar(15));
+```
+
+查看表中数据：
+
+```sql
+select * from emoloyees;
+```
+
+插入一条数据：
+
+```sql
+insert into employees values(1001, 'Tom');
+insert into employees values(1002, 'Jack');
+```
+
+当我们向表中插入中文数据时，`5.7`版本的MySQL会报错，而`8.0`版本则不会：
+
+```sql
+insert into employees values(1003, '杰瑞');
+```
+
+检查一下表的信息：
+
+```sql
+show create table employees;
+```
+
+可以发现，表的默认字符集是 `CHARSET=latin1` 拉丁字符集，不包含汉字。
+
+查看编码与比较规则：
+
+百分号`%`表示一个到多个字符
+
+```sql
+show variables like 'character_%';
+show variables like 'collation_%';
+```
+
+若是`5.7`版本，默认的编码字符集为`latin1`，而最新的`8.0`为`utf8`。配置文件可以在`my.ini`中修改
+
+删除一个数据库
+
+```sql
+drop database dbtest1;
+```
+
+### 基本的SELECT语句
+
+#### SQL分类
+
+* DDL `DataDefinitionLanguage` 用于定义数据库对象（数据库 表 字段）
+ * 主要语句关键字包括`CREATE` `DROP` `ALERT`等
+* DML `DataManipulationLanguage` 用于对数据库表中的数据进行增删改查
+ * 主要语句关键字包括`INSERT` `DELETE` `UPDATE` `SELECT`等
+ * `SELECT`是SQL语言的基础，最为重要
+* DQL `DataQueryLanguage` 用来查询数据库中表的记录
+ * 由于查询语句使用的非常频繁，将查询语句单拎出来自成一类
+* DCL `DataControlLanguage` 用来创建数据库用户、控制数据库的访问权限
+ * 主要的语句关键字包括`GRANT` `REVOKE` `COMMIT` `ROLLBACK` `SAVEPOINT`等
+
+### SQL规则和规范
+
+- SQL语句可以单行或多行书写，为了提高可读性，各子句分行写，必要时使用缩进，**以分号结尾**
+- 每条命令以 `;` 或 `\g` 或 `\G` 结束
+- 关键字不能被缩写也不能分行
+- 关于标点符号
+ - 必须保证所有的()、单引号、双引号是成对结束的
+ - 必须使用英文状态下的半角输入方式
+ - 字符串型和日期时间类型的数据可以使用单引号（' '）表示
+ - 列的别名，尽量使用双引号（" "），而且不建议省略as
+
+#### SQL大小写规则
+
+- MySQL 在 Windows 环境下是大小写不敏感的
+- MySQL 在 Linux 环境下是大小写敏感的
+ - 数据库名、表名、表的别名、变量名是严格区分大小写的
+ - 关键字、函数名、列名(或字段名)、列的别名(字段的别名) 是忽略大小写的。
+- 推荐采用统一的书写规范：
+ - 数据库名、表名、表别名、字段名、字段别名等都小写
+ - SQL 关键字、函数名、绑定变量等都大写
+
+#### 注释书写方法
+
+- 单行注释：`--注释内容` 或 `# 注释内容` （MySQL独有）
+- 多行注释: /* 注释内容 */
+
+#### DDL - 数据库操作
+
+* 查询
+ * 查询所有数据库 `SHOW DATABASES;`
+ * 查询当前数据库 `SELECT DATABASE();`
+* 创建
+ * `CREATE DATABASE [IF NOT EXISTS] 数据库名 [DEFAULT CHARSET 字符集] [COLLATE 排序规则];`
+* 删除
+ * `DROP DATABSE [IF EXISTS] 数据库名`
+* 使用
+ * `USE 数据库名`
+
+```shell
+mysql -u root -p # 进入mysql
+```
+
+```sql
+SHOW DATABASES; # 展示所有数据库
+CREATE DATABASE custom; # 创建一个名为custom的数据库
+USE custom; # 使用custom数据库
+SELECT DATABASE(); # 当前使用的是custom数据库
+```
+
+#### DDL - 表操作
+
+##### 创建表
+
+**在命令行下，可以在多行内编写一个SQL语句**
+
+```sql
+SHOW TABLES; # 查询当前数据库所有表
+DESC 表名; # 查询 表结构
+SHOW CREATE TABLE 表名; # 查询指定表的建表语句
+```
+
+```sql
+# 创建表
+CREATE TABLE custom(
+ param1 type1 [comment ''],
+ param2 type2 [comment ''],
+ param3 type3 [comment ''],
+ param4 type4 [comment '']
+)[comment '']
+```
+
+```sql
+# 创建一个tb_user表
+create table tb_user(
+ id int comment '编号',
+ name varchar(50) comment '姓名',
+ age int comment '年龄',
+ gender varchar(1) comment '性别'
+ ) comment '用户表';
+# 展示数据库中所有表
+show tables;
+# 查询表内所有字段
+desc tb_user;
+# 展示表的所有信息（包含字段注释、存储引擎、默认字符集、排序规则等信息）
+show create table tb_user;
+```
+
+案例 - 员工信息表
+
+```sql
+create table emp (
+ id int comment '编号',
+ workno varchar(10) comment '工号',
+ name varchar(10) comment '姓名',
+ gender char(1) comment '性别',
+ age tinyint unsigned comment '年龄',
+ idcard char(18) comment '身份证号',
+ entrydate date comment '入职时间'
+) comment '员工表';
+```
+
+创建成功后，输入`desc emp`查看
+
+```shell
+mysql> desc emp;
++-----------+------------------+------+-----+---------+-------+
+| Field | Type | Null | Key | Default | Extra |
++-----------+------------------+------+-----+---------+-------+
+| id | int | YES | | NULL | |
+| workno | varchar(10) | YES | | NULL | |
+| name | varchar(10) | YES | | NULL | |
+| gender | char(1) | YES | | NULL | |
+| age | tinyint unsigned | YES | | NULL | |
+| idcard | char(18) | YES | | NULL | |
+| entrydate | date | YES | | NULL | |
++-----------+------------------+------+-----+---------+-------+
+7 rows in set (0.00 sec)
+```
+
+##### 修改表
+
+```sql
+# 添加一个字段
+alter table 表名 add 字段名 类型(长度) [comment '']
+# 修改一个字段
+alter table 表名 modify 旧字段名 新字段名 类型(长度) [comment '']
+# 删除一个字段
+alter table 表名 drop 字段名
+# 修改表名
+alter table 表名 rename to 新表名
+```
+
+```sql
+alter table emp add nickname varchar(20) comment '昵称'
+alter table emp modify nickname username varchar(30)
+alter table emp drop username
+alter table emp rename to employee
+```
+
+### MySQL数据类型
+
+#### 数值类型
+
+在定义字段时，通过关键字`UNSIGNED`确定其`无符号 / 有符号`
+
+| 类型 | 大小 | 范围（有符号） | 范围（无符号） | 用途 |
+| :----------- | :--------------------------------------- | :----------------------------------------------------------- | :----------------------------------------------------------- | :-------------- |
+| TINYINT | 1 Bytes | (-128，127) | (0，255) | 小整数值 |
+| SMALLINT | 2 Bytes | (-32 768，32 767) | (0，65 535) | 大整数值 |
+| MEDIUMINT | 3 Bytes | (-8 388 608，8 388 607) | (0，16 777 215) | 大整数值 |
+| INT或INTEGER | 4 Bytes | (-2 147 483 648，2 147 483 647) | (0，4 294 967 295) | 大整数值 |
+| BIGINT | 8 Bytes | (-9,223,372,036,854,775,808，9 223 372 036 854 775 807) | (0，18 446 744 073 709 551 615) | 极大整数值 |
+| FLOAT | 4 Bytes | (-3.402 823 466 E+38，-1.175 494 351 E-38)，0，(1.175 494 351 E-38，3.402 823 466 351 E+38) | 0，(1.175 494 351 E-38，3.402 823 466 E+38) | 单精度 浮点数值 |
+| DOUBLE | 8 Bytes | (-1.797 693 134 862 315 7 E+308，-2.225 073 858 507 201 4 E-308)，0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) | 0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) | 双精度 浮点数值 |
+| DECIMAL | 对DECIMAL(M,D) ，如果M>D，为M+2否则为D+2 | 依赖于M和D的值 | 依赖于M和D的值 | 小数值 |
+
+#### 字符串类型
+
+| 类型 | 大小 | 用途 |
+| :--------- | :-------------------- | :------------------------------ |
+| CHAR | 0-255 bytes | 定长字符串 |
+| VARCHAR | 0-65535 bytes | 变长字符串 |
+| TINYBLOB | 0-255 bytes | 不超过 255 个字符的二进制字符串 |
+| TINYTEXT | 0-255 bytes | 短文本字符串 |
+| BLOB | 0-65 535 bytes | 二进制形式的长文本数据 |
+| TEXT | 0-65 535 bytes | 长文本数据 |
+| MEDIUMBLOB | 0-16 777 215 bytes | 二进制形式的中等长度文本数据 |
+| MEDIUMTEXT | 0-16 777 215 bytes | 中等长度文本数据 |
+| LONGBLOB | 0-4 294 967 295 bytes | 二进制形式的极大文本数据 |
+| LONGTEXT | 0-4 294 967 295 bytes | 极大文本数据 |
+
+**注意**：char(n) 和 varchar(n) 中括号中 n 代表字符的个数，并不代表字节个数，比如 CHAR(30) 就可以存储 30 个字符。
+
+CHAR 和 VARCHAR 类型类似，但它们保存和检索的方式不同。它们的最大长度和是否尾部空格被保留等方面也不同。在存储或检索过程中不进行大小写转换。**CHAR性能更优**
+
+BINARY 和 VARBINARY 类似于 CHAR 和 VARCHAR，不同的是它们包含二进制字符串而不要非二进制字符串。也就是说，它们包含字节字符串而不是字符字符串。这说明它们没有字符集，并且排序和比较基于列值字节的数值值。
+
+BLOB 是一个二进制大对象，可以容纳可变数量的数据。有 4 种 BLOB 类型：TINYBLOB、BLOB、MEDIUMBLOB 和 LONGBLOB。它们区别在于可容纳存储范围不同。
+
+有 4 种 TEXT 类型：TINYTEXT、TEXT、MEDIUMTEXT 和 LONGTEXT。对应的这 4 种 BLOB 类型，可存储的最大长度不同，可根据实际情况选择。
+
+#### 日期时间类型
+
+| 类型 | 大小 ( bytes) | 范围 | 格式 | 用途 |
+| :-------- | :------------ | :----------------------------------------------------------- | :------------------ | :----------------------- |
+| DATE | 3 | 1000-01-01/9999-12-31 | YYYY-MM-DD | 日期值 |
+| TIME | 3 | '-838:59:59'/'838:59:59' | HH:MM:SS | 时间值或持续时间 |
+| YEAR | 1 | 1901/2155 | YYYY | 年份值 |
+| DATETIME | 8 | 1000-01-01 00:00:00/9999-12-31 23:59:59 | YYYY-MM-DD HH:MM:SS | 混合日期和时间值 |
+| TIMESTAMP | 4 | 1970-01-01 00:00:00/2038结束时间是第 **2147483647** 秒，北京时间 **2038-1-19 11:14:07**，格林尼治时间 2038年1月19日 凌晨 03:14:07 | YYYYMMDD HHMMSS | 混合日期和时间值，时间戳 |
+
diff --git a/docs/note/React Hooks.md b/docs/note/React Hooks.md
new file mode 100644
index 00000000..64ee04f1
--- /dev/null
+++ b/docs/note/React Hooks.md
@@ -0,0 +1,1357 @@
+# React Hooks
+
+- 认识和体验Hooks
+- State/Effect
+- Context/Reducer
+- Callback/Memo
+- Ref/LayoutEffect
+- 自定义Hooks使用
+
+## 认识React Hooks
+
+Hooks 是 React16.8 推出的新特性
+
+在没有Hooks时，类组件能够完成的大部分工作，函数式组件都无法胜任：
+
+- 类组件可以定义并保存组件内部状态，并在状态发生改变时触发视图重新渲染
+ - 函数式组件不行，每次调用函数其中的变量都会被重新初始化，重新渲染时整个函数都重新执行
+- 类组件可以在其内部的生命周期回调中添加副作用
+ - 例如`componentDidMount`在类组件生命周期只会执行一次
+ - 函数式组件没有生命周期，如果在函数体内发起网络请求，那每次重新渲染都会发起请求
+
+类组件存在的问题：
+
+- 复杂组件变得难以理解
+ - 业务代码相互耦合，类组件变得复杂
+ - 逻辑强耦合在一起难以拆分，强行拆分会导致过度设计，进一步增加代码复杂度
+- class关键字的理解
+ - 初学React时class关键字理解存在困难
+ - 处理`this`的指向问题需要花费额外的心智负担
+- 组件状态复用
+ - 要复用组件需要借助高阶组件
+ - `redux` 中的 `connect` 或者 `react-router` 中的 `withRouter`，高阶组件的目的就是为了状态复
+ - 或通过Provider、Consumer来共享状态，但是Comsumer嵌套问题较严重
+
+Hooks带来的优势：
+
+- 在不编写class的情况下使用state和其他React特性（如生命周期）
+- Hooks 允许我们在函数式组件中使用状态，并在状态发生改变时让视图重新渲染
+- 同时，我们还可以在函数式组件中使用生命周期回调
+- 更多的优点 ...
+
+## 计数器案例对比
+
+分别使用Hooks和类组件编写一个计数器：
+
+::: code-group
+```tsx [CounterClass.jsx]
+// CounterClass.jsx
+import React, { PureComponent } from 'react'
+
+export default class CounterClass extends PureComponent {
+ constructor() {
+ super()
+ this.state = {
+ count: 0
+ }
+ }
+ setCount(num) {
+ this.setState({
+ count: num
+ })
+ }
+ render() {
+ const { count } = this.state
+ return (
+
+
CounterClass
+
{count}
+
this.setCount(count + 1)}>+1
+
this.setCount(count - 1)}>-1
+
+
CounterFunctional
+
{count}
+
setCount(count + 1)}>+1
+
setCount(count - 1)}>-1
+
+
Title: {title}
+
setTitle(new Date().getTime())}>Change Title
+
+
Profile
+
userName: {userContext.userName}
+
age: {userContext.age}
+
theme: {themeContext.theme}
+
+
UserInfoWithReducer
+
{JSON.stringify(userInfo)}
+
Add Age
+
pushLikes({ id: 10, name: 'ZiuChen', age: 21 })}>Push Likes
+
modifyName('ZiuChen')}>Modify Name
+
+
UserInfo
+
{JSON.stringify(userInfo)}
+
addAge()}>Add Age
+
pushLikes({ id: 10, name: 'ZiuChen', age: 21 })}>Push Likes
+
modifyName('ZiuChen')}>Modify Name
+
+
Counter
+
{count}
+
+1
+
+
Counter
+
{count}
+
+1
+
+
InnerCounter
+
Inner +1
+
+
Counter
+
{count}
+
{msg}
+
+1
+
setMsg(Math.random())}>setMsg
+
+
+
Counter
+
{count}
+
{msg}
+
+1
+
setMsg(Math.random())}>setMsg
+
+
+
CounterAccumulate
+
count: {count}
+
total: {total}
+
setCount(count + 1)}>+1
+
+
CounterAccumulate
+
count: {count}
+
total: {total}
+
setCount(count + 1)}>+1
+
setMsg(Math.random())}>setMsg
+
+
Input
+
+
Focus Input
+
+
TestRef
+
setCount(Math.random())}>Re-render
+
+
TestLayoutEffect
+
setCount(Math.random())}>Rerender
+
+
Profile
+
userName: {context.user.userName}
+
age: {context.user.age}
+
theme: {context.theme.theme}
+
+
GiantList
+
offset: {offset}
+
+ {list.map((item, index) => (
+ {item}
+ ))}
+
+
+
UserInfoStorage
+
token: {token}
+
handleInputChange(e)} />
+
+
Count: {count}
+ dispatch(addCount(1))}>+1
+ dispatch(subCount(1))}>-1
+
+ )
+})
+
+export default Counter
+```
+```tsx [[Prev] Counter.jsx]
+// [Prev] Counter.jsx
+import { connect } from '../hoc'
+import { addCount, subCount } from '../store/features/counter'
+
+const mapStateToProps = (state) => ({
+ count: state.counter.count
+})
+
+const mapDispatchToProps = (dispatch) => ({
+ addCount: (num) => dispatch(addCount(num)),
+ subCount: (num) => dispatch(subCount(num))
+})
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(() => {
+ return (
+
+
Count: {this.props.count}
+ this.props.addCount(1)}>+1
+ this.props.subCount(1)}>-1
+
+ )
+})
+```
+:::
+
+`react-redux`为我们提供了`shallowEqual`函数，用来比较两次映射出来的对象是否相同。
+
+使用时我们直接导入并传递给`useSelector`的第二个参数即可
+
+## React 18 新Hooks
+
+### useId
+
+用于生成横跨服务端和客户端的唯一稳定ID，同时避免hydration不匹配
+
+本质上是找到当前组件在组件树中的深度与层级，保证生成的值的一致性
+
+#### SSR
+
+同构应用
+
+- 一套代码，既可以在服务端运行，又可以在客户端运行，这就是同构应用
+- 同构是一种SSR的形态，是现代SSR的一种表现形式
+ - 当用户发出请求时，先在服务器通过SSR渲染出首页的内容
+ - 但是对应的代码同样可以在客户端被执行
+ - 执行的目的包括：绑定事件等，同时切换页面时，也可以在客户端被渲染
+
+Hydration
+
+> When doing SSR our pages are rendered to HTML. But HTML alone is not sufficient to make a page interactive. For example, a page with zero browser-side JavaScript cannot be interactive (there are no JavaScript event handlers to react to user actions such as click on a button.)
+>
+> To make our page interactive, in addition to render our page to HTML in Node.js, our UI framework (Vue/React/...) also loads and renders the page in the browser. (It creates an internal representation of the page, and then maps the internal representation to the DOM elements of the HTML we rendered in Node.js)
+>
+> This process is called *hydration*. Informally speaking: it makes our page interactive/alive/hydrated.
+
+在进行SSR时，我们的页面会呈现为HTML
+
+但仅仅HTML不足以使页面具有可交互性。例如：浏览器侧的JavaScript为零的页面是无法交互的，没有JavaScript事件处理程序来响应用户操作，例如单击按钮
+
+为了使我们的页面具有交互性，除了在Node.js中将页面呈现为HTML，我们的UI框架还在浏览器中加载和呈现页面（它创建页面的内部表示，然后将内部表示映射到我们在Node.js中呈现的HTML的DOM元素）
+
+这里用一张图简单介绍一下SSR的流程：
+
+
+
+### useTransition
+
+并不是做CSS动画的，而是用来完成过渡任务的
+
+返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数
+
+可以允许我们给React一些提示：某些任务的更新优先级较低，可以稍后再进行更新
+
+举一个例子：用输入框内的文本实时筛选万级数据的大列表，我们改造一下之前的GiantList案例：
+
+```tsx
+// GiantList.jsx
+import React, { memo, useState } from 'react'
+
+const list = new Array(10000).fill(0).map((_, i) => i)
+
+const GiantList = memo(() => {
+ const [showList, setShowList] = useState(list)
+ const [, setKeyword] = useState('')
+
+ function handleKeywordChange(e) {
+ const { value } = e.target
+ setKeyword(value || '')
+ value
+ ? setShowList(list.filter((item) => item.toString().includes(value)))
+ : setShowList(list)
+ }
+
+ return (
+
+
GiantList
+
handleKeywordChange(e)} />
+
+ {showList.map((item, index) => (
+ {item}
+ ))}
+
+
+
GiantList
+
handleKeywordChange(e)} />
+
{pending ? 'Loading...' : ''}
+
+ {showList.map((item, index) => (
+ {item}
+ ))}
+
+
+
GiantList
+
handleKeywordChange(e)} />
+
+ {deferredShowList.map((item, index) => (
+ {item}
+ ))}
+
+
+
+
+
+)
+```
+
+路由的本质是路径与组件的映射关系（`path <==> component`）
+
+ReactRouter不像VueRouter，它的路由映射关系是书写在组件中的：
+
+下面的例子中使用到了几个**组件**：`Routes` `Route` `Navigate` `NavLink`
+
+- `Routes` `Route`用来描述路径与组件的映射关系
+ - 通过为`path`和`element`传入路径和相对应的组件，将其包裹在`Routes`内即可完成路由的描述
+- `Navigate` 导航组件（在react-router5版本中是Redirect）
+ - 可以帮我们完成重定向操作，将想要重定向的路径传递给组件的`to`属性
+ - **当组件出现时，就会自动执行跳转**，属于功能性组件
+ - 当访问根路径`/`时就会自动跳转到`/home`页
+- `NavLink`用来实现路由的跳转
+ - 特殊组件，其`className` `style`这些属性都可以传递一个函数
+ - 可以从函数参数中解构出`isActive`属性来动态绑定样式（实际场景应用较少）
+
+```tsx
+// App.js
+import React, { PureComponent } from 'react'
+import { Routes, Route, Navigate, NavLink } from 'react-router-dom'
+import Home from './views/Home'
+import About from './views/About'
+import NotFound from './views/NotFound'
+
+export default class App extends PureComponent {
+ render() {
+ return (
+
+
App
+ (isActive ? 'link-active' : '')}>
+ Home
+
+ ({ color: isActive ? 'red' : '' })}>
+ About
+
+
+
+
+ )
+ }
+}
+```
+
+另外，这里还有一个小技巧，在最末一个路由指定一个path为`*`的路由匹配规则，可以为路由匹配添加fallback策略，当未匹配到其之前的任何域名时，会展示NotFound页面
+
+## 嵌套路由
+
+嵌套路由可以通过在`Route`组件内部嵌套新的`Route`组件来实现
+
+再通过`Outlet`组件来指定嵌套路由的占位元素（类似于VueRouter中的router-view）
+
+我们在之前的例子的基础上，为Home页面添加两个子页面HomeRanking和HomeRecommand
+
+同时，我们也应该为Home组件添加默认跳转，就像根路径默认重定向到Home组件那样，进入到Home组件后也应该默认重定向一个子页面中，这里我们仍然使用到了Navigate组件
+
+::: code-group
+```tsx [App.jsx ]
+// App.jsx
+import React, { PureComponent } from 'react'
+import { Routes, Route, Navigate, NavLink } from 'react-router-dom'
+import Home from './views/Home'
+import HomeRanking from './views/HomeRanking'
+import HomeRecommand from './views/HomeRecommand'
+
+export default class App extends PureComponent {
+ render() {
+ return (
+
+
+
+
+ )
+ }
+}
+```
+```tsx [Home.jsx]
+// Home.jsx
+import React, { PureComponent } from 'react'
+import { NavLink, Outlet } from 'react-router-dom'
+
+export default class Home extends PureComponent {
+ render() {
+ return (
+
+ )
+ }
+}
+```
+:::
+
+## 编程式导航（高阶组件）
+
+之前使用的ReactRouter提供的路由跳转的组件，无论是`Link`还是`NavLink`可定制化能力都比较差，无法实现“点击按钮后跳转路由”这样的需求，那么我们就需要通过编程式导航，使用JS来完成路由的跳转
+
+ReactRouter提供了编程式导航的API：`useNavigate`
+
+自ReactRouter6起，编程式导航的API不再支持ClassComponent，全面拥抱Hooks。
+
+我们将在后续的学习中开启Hooks的写法，那么目前如何在类组件中也能使用Hooks呢？答案是高阶组件
+
+封装一个高阶组件`withRouter`，经过高阶组件处理的类组件的props将会携带router对象，上面包含一些我们需要的属性和方法：
+
+::: code-group
+```tsx [withRouter.js]
+// withRouter.js
+import { useNavigate } from 'react-router-dom'
+
+export function withRouter(WrapperComponent) {
+ return (props) => {
+ const navigate = useNavigate()
+ const router = { navigate }
+ return
+
Home
+
this.props.router.navigate('/home/ranking')}>Ranking
+
this.props.router.navigate('/home/recommand')}>Recommand
+
+
+
HomeRanking
+
+ {list.map((item, index) => (
+ this.props.router.navigate(`/detail/${item.id}`)}>
+ {item.name}
+
+ ))}
+
+
+
Detail
+ Current Music ID: {this.props.router.params.id}
+
+
App
+ (isActive ? 'link-active' : '')}>
+ Home
+
+ ({ color: isActive ? 'red' : '' })}>
+ About
+
+ {useRoutes(routes)}
+
+ )
+}
+```
+:::
+
+## 懒加载
+
+针对某些场景的首屏优化，我们可以根据路由对代码进行分包，只有需要访问到某些页面时才从服务器请求对应的JS代码块
+
+可以使用`React.lazy(() => import( ... ))`对某些代码进行懒加载
+
+结合之前使用到的配置式路由映射规则，我们使用懒加载对代码进行分包
+
+```tsx {6,7,18,24}
+// router/index.js
+import { lazy } from 'react'
+// import HomeRecommand from '../views/HomeRecommand'
+// import About from '../views/About'
+
+const HomeRecommand = lazy(() => import('../views/HomeRecommand'))
+const About = lazy(() => import('../views/About'))
+
+export const routes = [
+ ...
+ {
+ path: '/home',
+ element:
+
+ Loading...}>
+
+
+
+)
+```
+
+当根组件内部有组件处于异步加载状态时，都会在页面上展示`Loading...`而不是崩溃掉
diff --git a/docs/note/React-Hooks.assets/SSR.svg b/docs/note/React-Hooks.assets/SSR.svg
new file mode 100644
index 00000000..9c46050e
--- /dev/null
+++ b/docs/note/React-Hooks.assets/SSR.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ User request URL Node Server match router component request Data inject data to HTML User accept HTML API Server
\ No newline at end of file
diff --git a/docs/note/React-Hooks.assets/useLayoutEffect.svg b/docs/note/React-Hooks.assets/useLayoutEffect.svg
new file mode 100644
index 00000000..dee4a255
--- /dev/null
+++ b/docs/note/React-Hooks.assets/useLayoutEffect.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Component Component Rerendered useEffect Rendered component (DOM) useEffect
\ No newline at end of file
diff --git a/docs/note/React.assets/immutable.gif b/docs/note/React.assets/immutable.gif
new file mode 100644
index 00000000..c3ee60d3
Binary files /dev/null and b/docs/note/React.assets/immutable.gif differ
diff --git a/docs/note/React.assets/prototype-setState.png b/docs/note/React.assets/prototype-setState.png
new file mode 100644
index 00000000..175930cd
Binary files /dev/null and b/docs/note/React.assets/prototype-setState.png differ
diff --git a/docs/note/React.assets/react-life-cycle.png b/docs/note/React.assets/react-life-cycle.png
new file mode 100644
index 00000000..2d8b6e28
Binary files /dev/null and b/docs/note/React.assets/react-life-cycle.png differ
diff --git a/docs/note/React.md b/docs/note/React.md
new file mode 100644
index 00000000..f027847a
--- /dev/null
+++ b/docs/note/React.md
@@ -0,0 +1,3728 @@
+# React
+
+## 邂逅React
+
+### React开发依赖
+
+- `react` 包含React的核心代码
+- `react-dom` 将React渲染到不同平台需要的核心代码
+- `babel` 将JSX转换成React代码的工具
+
+为什么要拆分成这么多的包？
+
+- 不同的库各司其职，让库变得纯粹
+- `react`包中包含了 React Web 和 React Native 共同拥有的**核心代码**
+- `react-dom` 针对Web和Native完成的事情不同
+ - Web端：`react-dom`会将JSX渲染成真实DOM，展示在浏览器中
+ - Native端：`react-dom`会将JSX渲染成原生的控件（如Android中的Button，iOS中的UIButton）
+
+### Babel与React的关系
+
+Babel是什么？
+
+- Babel又名Babel.js
+- 是目前前端使用非常广泛的编译器、转换器（Compiler/Transformer）
+- 提供对ES6语法的Polyfill，将ES6语法转为大多数浏览器都支持的ES5语法
+
+二者之间的联系
+
+- 默认情况下React开发可以不使用Babel
+- 但是我们不可能使用React.createElement来编写代码
+- 通过Babel，我们可以直接编写JSX（JavaScript XML），让Babel帮我们转化为React.createElement
+
+### React初体验
+
+我们通过CDN方式引入react、react-dom、babel这三个依赖
+
+并且创建`#root`根节点，作为渲染React组件的容器，再新建一个script标签，键入以下内容
+
+```html
+
+
+
+
+
+```
+
+这时，一个内容为`Hello, React!`的div标签就被渲染到页面上了
+
+需要注意的是：`ReactDOM.render`这种写法适用于React18之前，在React18之后建议用下面的代码渲染根节点：
+
+```tsx
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+root.render(Hello, React! )
+```
+
+### 第一个React程序
+
+设想我们现在有这样一个需求：点击按钮使文本`Hello, World!`变为`Hello, React!`
+
+我们很容易就能写出如下代码：
+
+```tsx
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+let msg = 'Hello, World!'
+
+render() // initial render
+
+function handleChangeClick() {
+ msg = 'Hello, React!'
+}
+
+root.render(
+
+
{msg}
+ Change Text
+
+)
+```
+
+在Vue中，如果我们对数据进行了修改，Vue的数据响应式会自动帮我们完成视图的更新
+
+然而在React中，当我们修改了数据需要通知React，让React重新渲染视图。在这里，我们可以把渲染的过程封装为一个函数，方便我们重复调用，触发重新渲染
+
+```tsx
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+let msg = 'Hello, World!'
+
+render() // initial render
+
+function handleChangeClick() {
+ msg = 'Hello, React!'
+ render() // re-render
+}
+
+function render() {
+ root.render(
+
+
{msg}
+ Change Text
+
+ )
+}
+```
+
+这个案例中，我们使用`{}`语法，将动态的JS语法嵌入到JSX代码中
+
+### 组件化开发
+
+React有两种组件：类组件与函数组件，React18+推荐使用函数组件+Hooks
+
+#### 类组件
+
+我们使用类组件来逐步重构上面的案例：
+
+```tsx
+class App extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ msg: 'Hello, World!'
+ }
+ }
+ render() {
+ return {this.state.msg}
+ }
+}
+
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+root.render(
+
{this.state.msg}
+ Change Text
+
+ )
+ }
+}
+
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+root.render(
+
{this.state.msg}
+ Change Text
+
+ )
+ }
+}
+
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+root.render(Change Text
+ ...
+}
+...
+```
+
+### 列表渲染
+
+可以通过循环，将数组渲染到视图中
+
+```tsx
+class App extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ movieList: [
+ 'The Shawshank Redemption',
+ 'The Godfather',
+ 'The Godfather: Part II',
+ 'The Dark Knight'
+ ]
+ }
+ }
+
+ render() {
+ return (
+
+ {this.state.movieList.map((item) => (
+ {item}
+ ))}
+
+ )
+ }
+}
+
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+root.render(
+
Count: {count}
+ Add
+ Sub
+
+ )
+ }
+}
+
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+root.render(
+ {/* Some Comment... */}
+
Count: {count}
+ Add
+ Sub
+
+)
+...
+```
+
+#### JSX嵌入变量作为子元素
+
+可以通过花括号语法将变量内容嵌入到JSX语法中：
+
+```tsx
+const message = 'Hello, React!'
+const arr = ['abc', 'cba', 'nba']
+
+return (
+
+
{ message }
+
{ arr }
+
+
+ Number: {number}
+
+
+ Null: {n}
+
+
+ Undefined: {u}
+
+
+ Boolean: {b}
+
+
+ { obj }
+
+ )
+}
+...
+```
+
+#### JSX的属性绑定
+
+- 在Vue中我们通过`v-bind`绑定属性
+- 在React中如何绑定元素属性？
+- `title` `src` `href` `class` 内联`style`等
+
+下例中，我们通过花括号语法对元素的属性进行了动态绑定，点击按钮可以切换className状态
+
+同时，动态绑定的内联样式也会发生改变，通过花括号语法动态绑定style属性
+
+```tsx
+class App extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ isActive: false,
+ title: 'Description'
+ }
+ this.changeActive = this.changeActive.bind(this)
+ }
+
+ changeActive() {
+ this.setState({
+ isActive: !this.state.isActive
+ })
+ }
+
+ render() {
+ const { isActive, title } = this.state
+ const classList = ['title', isActive ? 'active' : '']
+
+ return (
+
+
+ Hello, React!
+
+
Change Active
+
this.changeActive()}>Change Active
+...
+```
+
+这样书写有几种好处：
+
+- 给事件处理函数传递参数更方便
+- 书写更方便 不必主动考虑this绑定问题
+
+它的原理是，我们对外暴露的本质上是一个箭头函数，当调用箭头函数时，本质上是执行`this.changeActive`，这是 一种隐式绑定，找到的this为当前组件实例
+
+### 事件绑定参数传递
+
+- Event参数传递
+- 额外参数传递
+
+事件回调函数的第一个默认参数就是Event对象，这个Event对象是经过React包装后的，但是原生的属性都包含在内，React对其进行了一些扩展
+
+```tsx {13}
+...
+changeActive(ev) {
+ console.log('Event', ev)
+}
+
+render() {
+ return (
+
+ {/* event将作为默认入参传递给changeActive */}
+ Change Active
+
+ {/* 通过箭头函数绑定事件监听回调函数时 需要手动透传一下event */}
+ this.changeActive(ev)}>Change Active
+
+ )
+}
+...
+```
+
+当我们需要传递额外的参数时，通过箭头函数传递也更容易：
+
+```tsx {13}
+changeActive(ev, name, age) {
+ console.log('Event', ev)
+ console.log('Name', name)
+ console.log('Age', age)
+}
+
+render() {
+ return (
+
+ {/* NOT Recommand */}
+ Change Active
+ {/* Recommand */}
+ this.changeActive(ev, 'Ziu', 18)}>Change Active
+
+ )
+}
+```
+
+需要注意，当通过`.bind`传递额外参数时，最后一个参数才是默认传递的Event对象，这会导致非预期行为
+
+```sh
+> Event 'Ziu'
+> Name 18
+> Age {Event}
+```
+
+### JSX事件绑定案例
+
+创建一个Tab栏，选中哪个选项，哪个选项被激活切换为红色，同一时间仅有一个激活项目
+
+结合之前学习的内容，很容易就可以写出下述 代码：
+
+```tsx
+class App extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ activeIndex: 0,
+ tabList: ['Home', 'Recommend', 'Hot', 'User']
+ }
+ }
+
+ changeActive(index) {
+ this.setState({
+ activeIndex: index
+ })
+ }
+
+ render() {
+ const { activeIndex, tabList } = this.state
+
+ return (
+
+
+ {tabList.map((item, index) => (
+ this.changeActive(index)}
+ >
+ {item}
+
+ ))}
+
+
+ {isLoading ? (
+
Loading ...
+ ) : (
+
Some Content
+ )}
+
this.changeLoading()}>Toggle Loading
+
+
+ username: Ziu
+ {isVip && VIP }
+
+
+
this.changeVip()}>Toggle Vip
+
+
Target Element
+
this.changeShow()}>Toggle Show
+
+
+ {stuList.map(({ name, age, score }) => (
+
+ {name}
+ {age}
+ {score}
+
+ ))}
+
+
+
Header
+
+ Content
+
Banner
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+
+
+
Footer
+
{page}
+ }
+}
+```
+
+通过JSX语法描述出来的template会经过Babel转化，转化为JavaScript树的数据结构
+
+在控制台中我们可以看到，子节点都存放进了父节点的`props.children`中
+
+#### 虚拟DOM树
+
+JSX仅仅是`React.createElement(component, props, ...children)`的语法糖
+
+所有的JSX语法都会被Babel转化为这样的命令式语法
+
+.createElement函数的参数
+
+- type
+ - 当前ReactElement的类型
+ - 如果是标签元素，值为字符串如：`"div"`
+ - 如果是组件元素，那么值为组件的名称
+- config
+ - 所有JSX中绑定的属性都在config中以键值对的形式存储
+ - 例如`className` => `class`
+
+我们借助Babel官网的Playground来检查一下JSX语法的转化
+
+```js
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const page = /*#__PURE__*/_jsxs("div", {
+ className: "page",
+ children: [/*#__PURE__*/_jsx("div", {
+ className: "header",
+ children: "Header"
+ }), /*#__PURE__*/_jsxs("div", {
+ className: "content",
+ children: ["Content", /*#__PURE__*/_jsx("div", {
+ className: "banner",
+ children: "Banner"
+ }), /*#__PURE__*/_jsxs("ul", {
+ children: [/*#__PURE__*/_jsx("li", {
+ children: "Item 1"
+ }), /*#__PURE__*/_jsx("li", {
+ children: "Item 2"
+ }), /*#__PURE__*/_jsx("li", {
+ children: "Item 3"
+ }), /*#__PURE__*/_jsx("li", {
+ children: "Item 4"
+ }), /*#__PURE__*/_jsx("li", {
+ children: "Item 5"
+ })]
+ })]
+ }), /*#__PURE__*/_jsx("div", {
+ className: "footer",
+ children: "Footer"
+ })]
+});
+console.log(page);
+```
+
+这时经过Babel转义后的纯JS函数，这段函数可以在浏览器中直接运行
+
+如果移除了相关JSX代码，并将他们都替换为`React.createElement`函数调用，那么得到的代码也可以直接在浏览器中运行。Babel帮助我们完成了转化，提高了开发效率，相比于通过调用`React.createElement`来描述视图，通过JSX编写的代码更加容易维护
+
+这些代码最终形成的就是虚拟DOM树，React可以将虚拟DOM渲染到页面上，形成真实DOM
+
+虚拟DOM允许React可以通过diff算法，高效地对真实DOM树进行更新
+
+### 声明式编程
+
+- 虚拟DOM帮我们从命令式编程转到了声明式编程的模式
+- 对虚拟DOM作何处理，如何渲染是由React决定的，由于做了一层抽象，那么同样可以将虚拟DOM渲染成原生组件（React Native）
+
+### 购物车案例
+
+下面写一个经典的购物车案例
+
+```tsx
+function formatPrice(price) {
+ return `$ ${price.toFixed(2)}`
+}
+
+class App extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ books: [
+ { name: 'book1', author: 'author1', price: 100, count: 0 },
+ { name: 'book2', author: 'author2', price: 200, count: 0 },
+ { name: 'book3', author: 'author3', price: 300, count: 0 },
+ { name: 'book4', author: 'author4', price: 400, count: 0 }
+ ]
+ }
+ }
+
+ changeCount(index, count) {
+ this.setState((state) => {
+ const books = [...state.books]
+ books[index].count += count
+ return { books }
+ })
+ }
+
+ removeItem(index) {
+ this.setState((state) => {
+ const books = [...state.books]
+ books.splice(index, 1)
+ return { books }
+ })
+ }
+
+ getTotal() {
+ const { books } = this.state
+ return books.reduce((acc, { price, count }) => acc + price * count, 0)
+ }
+
+ renderBookCart() {
+ const { books } = this.state
+ const total = this.getTotal()
+ return (
+
+
Shopping Cart
+
+ {books.map(({ name, author, price, count }, index) => (
+
+ {index + 1}
+ {name}
+ {author}
+ {formatPrice(price)}
+
+ this.changeCount(index, -1)} disabled={count <= 0}>
+ -
+
+ {count}
+ this.changeCount(index, 1)}>+
+
+ this.removeItem(index)}>Delete
+
+ ))}
+
+
+ Total: {formatPrice(total)}
+
+
Shopping Cart is Empty
+ }
+
+ render() {
+ const isEmpty = this.state.books.length === 0
+
+ return !isEmpty ? this.renderBookCart() : this.renderEmptyTip()
+ }
+}
+
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+root.render(Hello, React!
+ }
+}
+```
+
+## React组件化开发
+
+- React组件生命周期
+- React组件间通信
+- React组件插槽
+- React非父子的通信
+- setState使用详解
+
+组件化是React的核心思想之一，组件化是一个抽象的过程，将大的应用程序抽象为多个小的组件，最终形成组件树
+
+分而治之，让代码更容易组织和管理
+
+React组件相对于Vue更加灵活多样，按照不同的方式可以分为多种组件
+
+- 根据组件定义方式，可以分为：函数组件(Functional Component)与类组件(Class Component)
+- 根据组件内部是否有状态需要维护，可以分为：无状态组件(Stateless Component)和有状态组件(Stateful Component)
+- 根据组件的不同职责，可以分为：展示型组件(Presentational Component)和容器型组件(Container Component)
+
+除此之外，还有异步组件、高阶组件等...
+
+### 类组件
+
+- 类组件的定义有以下要求：
+ - 组件的名称必须为大写（无论是类组件还是函数组件）
+ - 类组件需要继承自React.Component
+ - 类组件内必须实现render函数
+- 通过class关键字定义一个组件
+ - constructor是可选的，通常需要在constructor中初始化一些数据
+ - this.state中维护的数据就是组件内部的数据
+ - **render方法是class组件中唯一必须实现的方法**
+
+#### render函数
+
+- render函数在组件第一次渲染时被调用
+- 当`this.props`或`this.state`发生变化时被调用
+
+被调用时组件内会检查`this.props`和`this.state`是否发生变化，并且返回下面的返回值之一：
+
+- React元素
+ - 通常通过JSX创建
+ - 例如`
`会被React渲染为DOM节点，而`
`还是`Hello, React!
+}
+```
+
+- 函数组件是使用function定义的函数，函数的返回值会返回与render函数相同的内容，表示组件要渲染的内容
+- 函数组件有自己的特点（在无hooks的情况下，引入hooks后函数组件与类组件一样强大）
+ - 没有生命周期，也会被更新并挂在，但是没有生命周期函数
+ - this关键字不能指向组件实例，因为没有组件实例
+ - 没有内部状态（state）
+
+## 组件的生命周期
+
+我们需要在组件的不同生命周期中执行不同的操作，比如添加解除监听器、发起网络请求等
+
+
+
+结合上图，解读一下组件的完整生命周期：
+
+- 组件挂载后 调用构造方法 constructor
+- 执行 render 方法
+- 组件挂载完毕 `componentDidMount`
+- 后续，当props发生修改 或调用了setState触发state改变 或调用forceUpdate触发组件更新
+ - 重新执行render函数 根据修改后的最新状态更新视图
+ - React帮我们更新DOM和refs
+ - 更新回调 `componentDidUpdate` 被调用
+- 组件卸载 一般是条件渲染切换路由时发生卸载
+- 组件被卸载前 `componentWillUnmount` 被调用
+ - 可以用来执行一些清理副作用的操作
+ - 如解除监听器等
+
+总结一下常用的生命周期钩子：
+
+- `componentDidMount` 组件挂载后
+- `componentDidUpdate` 组件更新后
+- `componentWillUnmount` 组件卸载前
+
+```tsx
+// LifeCycle.jsx
+import { Component } from 'react'
+
+export default class LifeCycle extends Component {
+ constructor() {
+ super()
+ this.state = {
+ count: 0
+ }
+ }
+
+ addCount = () => {
+ this.setState({
+ count: this.state.count + 1
+ })
+ }
+
+ componentDidMount() {
+ console.log('LifeCycle componentDidMount')
+ }
+
+ componentDidUpdate() {
+ console.log('LifeCycle componentDidUpdate')
+ }
+
+ componentWillUnmount() {
+ console.log('LifeCycle componentWillUnmount')
+ }
+
+ render() {
+ console.log('LifeCycle render')
+ return (
+
+
LifeCycle
+
{this.state.count}
+
+
+
+
Title: {title}
+
Count: {count}
+
+ {tabs.map((tab, index) => (
+ {tab}
+ ))}
+
+
+
+
+ )
+ }
+}
+```
+
+上文中的例子我们从父组件向子组件传递数据，但是数据都为静态的
+
+我们再完成一个动态数据的绑定，用到了axios请求网络数据，并将数据动态传递给子组件
+
+在父组件的 componentDidMount 中发起网络请求，获取到 postList 后通过props动态传递给子组件 Content 展示出来
+
+```tsx
+// Content.jsx
+import React, { Component } from 'react'
+
+export default class Content extends Component {
+ render() {
+ const { postList } = this.props
+
+ return (
+
+
+ {postList.map((post) => {
+ return {post.title}
+ })}
+
+
+
+ )
+ }
+}
+```
+
+### 子组件向父组件通信
+
+除了父组件向下传递数据，子组件也需要向上传递数据给父组件。
+
+在React中是通过父组件提供给子组件一个回调函数，在子组件中调用回调函数，从而达到子组件向父组件通信的目的
+
+父组件在提供数据状态 `count` 的同时，也提供了增减 `count` 的回调函数 `addCount` 和 `subCount`，子组件通过调用回调即可修改状态值
+
+```tsx
+// Counter.jsx
+import React, { Component } from 'react'
+
+export default class Counter extends Component {
+ render() {
+ const { count, addCount, subCount } = this.props
+ return (
+
+ -
+ {count}
+ +
+
+ )
+ }
+}
+
+// App.jsx
+import React, { Component } from 'react'
+import Counter from './components/Counter'
+
+export default class App extends Component {
+ constructor() {
+ super()
+ this.state = {
+ count: 0
+ }
+ }
+
+ addCount = () => {
+ this.setState({
+ count: this.state.count + 1
+ })
+ }
+
+ subCount = () => {
+ this.setState({
+ count: this.state.count - 1
+ })
+ }
+
+ render() {
+ const { count } = this.state
+ return (
+
+
+ )
+ }
+}
+```
+
+### 参数propTypes
+
+我们可以对props传递值的类型做限制 （目前官方已不再推荐使用prop-types 建议直接上TypeScript）
+
+- 如果项目中默认集成了Flow或TypeScript，可以直接进行类型验证
+- 如果没有集成，则可以通过 prop-types 库来进行参数类型验证
+- 从React v15.5起，React.PropTypes独立成为了一个npm包 prop-types 库
+
+```sh
+pnpm add prop-types
+```
+
+以之前的类组件 Header 为例，为其添加类型限制：
+
+```tsx {3,27-31}
+// Header.jsx
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class Header extends Component {
+ // constructor(props) {
+ // super(props)
+ // }
+
+ render() {
+ const { title, count, tabs } = this.props
+
+ return (
+
+
Title: {title}
+
Count: {count}
+
+ {tabs.map((tab, index) => (
+ {tab}
+ ))}
+
+
+ {tabs.map((tabName, index) => (
+
+ {tabName}
+
+ ))}
+
+
Home }
+ {tabs[activeIndex] === 'Hot' && Hot }
+ {tabs[activeIndex] === 'Category' && Category }
+ {tabs[activeIndex] === 'Profile' && Profile }
+
+ )
+ }
+}
+```
+
+## React中的插槽
+
+React并不存在插槽的概念，但是可以通过`props.children`来实现类似的效果
+
+- 可以通过向子组件传递`props.children`子元素来决定子组件内渲染何种内容的标签
+- 我们在子组件标签内书写的内容都会默认作为`props.children`传递给子组件
+
+### 通过children实现插槽
+
+实现一个导航栏NavBar组件，左中右布局，渲染内容由父组件决定
+
+需要注意的是 如果只传入了一个子标签，那么`props.children`不再是一个数组，需要对此做额外判断
+
+```tsx
+// NavBar.jsx
+import React, { Component } from 'react'
+
+export default class NavBar extends Component {
+ render() {
+ const { children } = this.props
+
+ Array.isArray(children) || (children = [children])
+
+ return (
+
+
{children[0]}
+
{children[1]}
+
{children[2]}
+
+
+ Back
+ Search
+ Menu
+
+
+
{left}
+
{center}
+
{right}
+
Back
+ const center = Search
+ const right = Menu
+
+ return (
+
+
+ )
+ }
+}
+```
+
+### 作用域插槽
+
+在Vue中，可以通过作用域插槽，在父组件插槽内容中注入插槽的数据
+
+- 标签与结构由父组件决定
+- 数据内容由子组件对外暴露
+
+重写之前的Tabs例子，可以将插槽传递的内容由静态的React元素变为一个函数，这样在子组件内部就可以通过函数传参，动态地对外暴露数据
+
+之前每个Tab使用`span`标签书写的，通过作用域插槽，我们将它通过`button`标签渲染出来
+
+```tsx{6,22,57}
+// Tabs.jsx
+import React, { Component } from 'react'
+
+export default class Tabs extends Component {
+ render() {
+ const { tabs, activeIndex, changeTab, tabSlot } = this.props
+
+ return (
+
+ {tabs.map((tabName, index) => (
+
+ {tabSlot ? tabSlot(tabName) : tabName}
+
+ ))}
+
+ {content} }
+ >
+ {tabs[activeIndex] === 'Home' &&
Home }
+ {tabs[activeIndex] === 'Hot' && Hot }
+ {tabs[activeIndex] === 'Category' && Category }
+ {tabs[activeIndex] === 'Profile' && Profile }
+
+ )
+ }
+}
+```
+
+## Context跨组件传参
+
+非父子组件之间的数据共享
+
+- props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的
+- 第三方状态库 外置于React 如Redux （实际开发中较为常用）
+- 事件总线 ...
+
+针对跨组件传参的场景，React提供了一个API名为Context
+
+- Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props
+- 使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等
+
+### 用Context实现跨组件传参
+
+假设有App Profile UserCard三个嵌套组件，我们希望App中的 `isDarkMode` 状态能够透传到UserCard组件中
+
+- 全局通过 `createContext` 创建一个上下文
+- 根组件通过 `DarkModeContext.Provider` 标签与 `value` 传递值到上下文中
+- 需要使用到该值的子组件通过 `UserCard.contextType = DarkModeContext` 绑定到上下文
+- 随后即可在子组件中通过 `this.context` 获取到此上下文当前绑定的状态值
+
+::: code-group
+```tsx [context.js]
+// context.js
+import { createContext } from 'react'
+
+export const DarkModeContext = createContext()
+```
+
+```tsx [App.jsx]
+// App.jsx
+import React, { Component } from 'react'
+import Profile from './components/Profile'
+import { DarkModeContext } from './context'
+
+export default class App extends Component {
+ constructor() {
+ super()
+ this.state = {
+ darkMode: false
+ }
+ }
+
+ changeDarkMode = () => {
+ this.setState({ darkMode: !this.state.darkMode })
+ }
+
+ render() {
+ const { darkMode } = this.state
+
+ return (
+
+ Change DarkMode
+
+ )
+ }
+}
+
+// Profile.jsx
+import React, { Component } from 'react'
+import UserCard from './UserCard'
+
+export default class Profile extends Component {
+ render() {
+ return (
+
+
+ )
+ }
+}
+```
+
+```tsx [UserCard.jsx]
+// UserCard.jsx
+import React, { Component } from 'react'
+import { DarkModeContext } from '../context'
+
+export default class UserCard extends Component {
+ render() {
+ return (
+
+
UserCard
+ {this.context ? Dark Mode : Light Mode }
+
+ )
+ }
+}
+
+UserCard.contextType = DarkModeContext
+```
+:::
+
+在类组件中可以通过Context共享数据，而函数组件中的this并没有指向组件实例，那么在函数式组件中应当如何使用？
+
+用函数式组件重写一下 UserCard
+
+```tsx
+// UserCard.jsx
+import { DarkModeContext } from '../context'
+
+export default function UserCard() {
+ return (
+
+ {(context) => (
+
+
UserCard
+ {context ? Dark Mode : Light Mode }
+
+ )}
+
+ )
+}
+```
+
+如果同时需要共享多个状态，Provider可以嵌套，那么在子组件中可以通过不同的Context.Consumer获取到不同的全局上下文，执行不同的操作，展示不同的内容
+
+### React.createContext
+
+- 创建一个需要共享的Context对象
+- 如果一个组件订阅了Context，那么这个组件会从自身最近的那个匹配的Provider中读取到当前的context值
+- defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值
+- `const SomeContext = React.createContext(defaultValue)`
+
+### Context.Provider
+
+- 每个Context对象都会返回一个Provider组件，它允许消费组件订阅Context的变化
+- Provider接收一个value属性，用于将变化的值传递给消费组件Consumer
+- 一个Provider可以与多个Consumer创建关系
+- 多个Provider可以嵌套使用，内层数据会覆盖外层数据
+- 当Provider的value发生变化时，其内部的所有Consumer组件都会重新渲染
+
+### Class.contextType
+
+- 挂载在类组件上的 `contextType` 属性会被重新赋值为一个由 `React.createContext` 创建的Context对象
+- 这允许你在类组件中通过 `this.context` 获取到**最近的Context**的值
+- 任何生命周期都能访问到这个值
+
+### Context.Consumer
+
+- 帮你在**函数式组件**中完成订阅context （函数式组件中没有this）
+- 当Consumer订阅到context变更，会触发其内部传递的函数
+- 传入Consumer的函数接收当前的context值，返回一个React元素节点
+
+### 关于defaultValue
+
+什么时候会用到创建Context时传入的defaultValue？
+
+如果子组件通过 `this.context` 向上查找时没有找到相应的Provider，则使用Context的默认值
+
+```tsx{10}
+...
+ render() {
+ const { darkMode } = this.state
+
+ return (
+ <>
+
+ Change DarkMode
+
+
+
+ )
+ }
+...
+```
+
+如果你确实希望层层传递props来实现跨组件通信，那么可以在render函数中直接将`this.props`进行属性展开，虽然不推荐这样的做法：
+
+```tsx
+// App.jsx
+Play
+
+ )
+ }
+}
+
+// Player.jsx
+import React, { Component } from 'react'
+import { on, off } from '../eventbus'
+
+export default class Player extends Component {
+ constructor() {
+ super()
+ this.state = {
+ musicName: ''
+ }
+ }
+
+ playMusic = ({ musicName }) => {
+ console.log('Music Play: ' + musicName)
+ this.setState({ musicName })
+ }
+
+ componentDidMount() {
+ on('play', this.playMusic)
+ }
+
+ componentWillUnmount() {
+ off('play', this.playMusic)
+ }
+
+ render() {
+ return (
+
+
Player
+
Now Playing: {this.state.musicName}
+
Home
+ }
+}
+
+export class Profile extends Component {
+ render() {
+ console.log('Profile render')
+ return Profile
+ }
+}
+
+export default class App extends Component {
+ constructor() {
+ super()
+ this.state = {
+ count: 0
+ }
+ }
+
+ render() {
+ console.log('App render')
+ return (
+
+
Count: {this.state.count}
+
this.setState({ count: this.state.count + 1 })}>+1
+
+
+
+ -
+ {count}
+ +
+
+ )
+ }
+}
+
+// App.jsx
+import React, { Component } from 'react'
+import Counter from './components/Counter'
+
+export default class App extends Component {
+ constructor() {
+ super()
+ this.state = {
+ count: 0,
+ title: 'Hello, World!'
+ }
+ }
+
+ changeTitle = () => {
+ this.setState({
+ title: new Date().getTime()
+ })
+ }
+
+ ...
+
+ render() {
+ const { title, count } = this.state
+ return (
+
+
{title}
+ Change Title
+
+
Recommand
+ count: {count}
+
+ )
+})
+```
+
+### 不可变数据的力量
+
+来自React官方文档，不可变数据指的是稳定的state和props
+
+我们在这里举一个简单的书籍列表的例子：
+
+我们首先向state中推入一条新数据，随后使用 `setState` 将当前的状态作为更新源，点击按钮后页面是可以正常更新的
+
+```tsx {4,21-22}
+// BookList.jsx
+import React, { Component } from 'react'
+
+export default class BookList extends Component {
+ constructor() {
+ super()
+ this.state = {
+ books: [
+ { id: 1, name: 'book1', price: 10 },
+ { id: 2, name: 'book2', price: 20 },
+ { id: 3, name: 'book3', price: 30 },
+ { id: 4, name: 'book4', price: 40 }
+ ]
+ }
+ }
+
+ addBook = () => {
+ const newBook = { id: new Date().getDate(), name: 'book5', price: 50 }
+ this.state.books.push(newBook)
+ this.setState({ books: this.state.books })
+ }
+
+ render() {
+ const { books } = this.state
+
+ return (
+
+
+ {books.map((book) => {
+ return (
+
+ {book.name}
+ {book.price}
+
+ )
+ })}
+
+
add Book
+
+ getNativeDOM
+
+ )
+ }
+}
+```
+
+```tsx {7,10,16}
+// method 2: dynamic bind Ref object to target Element's ref attribute
+import React, { PureComponent, createRef } from 'react'
+
+export default class Input extends PureComponent {
+ constructor() {
+ super()
+ this.inputRef = createRef()
+ }
+ getNativeDOM = () => {
+ console.log(this.inputRef.current) //
+ getNativeDOM
+
+ )
+ }
+}
+```
+
+```tsx {8}
+// method 3: bind a function to ref attribute of target element
+import React, { PureComponent } from 'react'
+
+export default class Input extends PureComponent {
+ render() {
+ return (
+
+
+ )
+ }
+}
+```
+
+### 获取组件实例
+
+通过类似的方法，可以直接获取到组件实例，也可以直接调用组件实例上的方法
+
+```tsx
+import React, { PureComponent, createRef } from 'react'
+
+class CustomInput extends PureComponent {
+ foo = () => {
+ console.log('CustomInput foo called')
+ }
+
+ render() {
+ return
+ getComponent
+
+ )
+ }
+}
+```
+
+但是，函数式组件没有实例，更别提直接调用实例方法了。类似于Vue3中通过setup创建的组件，我们需要对函数式组件做额外处理，类似于`defineExpose`
+
+这时就需要用到新的API：`forwardRef` 和 `useImperativeHandle`
+
+- `forwardRef` 用于将ref属性传递给函数式组件
+ - 父组件传递给子组件的ref属性，会被React自动传递给子组件的第二个参数，即 `forwardRef` 的第二个参数
+- `useImperativeHandle` 用于将函数式组件内部的方法暴露给父组件
+
+```tsx
+import React, { PureComponent, createRef, forwardRef, useImperativeHandle } from 'react'
+
+const CustomInput = forwardRef((props, ref) => {
+ const foo = () => {
+ console.log('CustomInput foo called')
+ }
+
+ useImperativeHandle(ref, () => ({
+ foo
+ }))
+
+ return
+ getComponent
+
+ )
+ }
+}
+```
+
+我们对例子稍加改动，将组件的`value`属性设置为state中的值，从而实现受控组件。
+
+需要注意的是，绑定`value`属性的同时，我们也要绑定`onChange`事件，供用户输入时对state进行更新
+
+```tsx {8,22}
+// Input.jsx
+import React, { PureComponent } from 'react'
+
+export default class Input extends PureComponent {
+ constructor(props) {
+ super(props)
+ this.state = {
+ value: 'default Value'
+ }
+ }
+
+ handleInputChange = (ev) => {
+ this.setState({
+ value: ev.target.value
+ })
+ }
+
+ render() {
+ return (
+
+
currentValue: {this.state.value}
+