文章目录
- 项目地址
- 一、React基础
-
- 1.1 vite创建
-
- 1.2 jsx
-
- 1.3 基础
-
- 1. 创建第一个组件
- 2. 安装boostrap
- 3. 插件常用命令
- 4. map
- 二、组件
-
- 2.1 useState
-
- 1. useState
- 2. 使用
- 3.更新对象
- 4. 更新数组(增,删,改)
- 5. 使用immer包简化类的更新
- 2.2 interface和Props
-
- 1. 定义interface
- 2. 父传子
- 3. 子传父
- 4. props 和 state
- 5. 通过children传递
- 6. 练习(父传递函数给子)
- 2.3 使用react hook form
-
- 2.4 useEffect
-
- 1. 清除函数
- 2. get接口数据
- 3. 异步get接口
- 2.5 useLayoutEffect
-
- 2.6 useReducer
-
- 2.7 userSyncExternalStore
- 2.8 性能优化
-
- 1. useTransition
- 2. useDeferredValue
- 2.9 useRef
-
- 1. 用于访问真实的 DOM 节点
- 2. 保存可变的值,而不引起组件重新渲染
- 3. 保持上一次渲染的值(类似缓存)
- 4. 和 setInterval/setTimeout 搭配使用
项目地址
dbt
airflow
一、React基础
1.1 vite创建
1. 创建项目

2. 安装项目所需环境
- 进入到 my_demo_01里执行
npm install
- 运行测试
npm run dev

1.2 jsx
1. 三元表达式
- 三元表达式,isLoggedIn判断成功,则显示Logout组件,判断失败显示Login组件
{isLoggedIn?<Logout/>:<Login/>}
- 成功则渲染,不成功则什么都不做
{isLoggedln &&<Dashboard />}
1.3 基础
1. 创建第一个组件

2. 安装boostrap
- 安装bootstrap
npm i bootstrap@5.2.3
- 安装成功
package.json
里可以看到bootstrap

- 引入boostrap在项目里

3. 插件常用命令
- rfce :创建一个function
- Ctrl +F2 选中所有当前相同的单词
4. map

二、组件
2.1 useState
- 在哪个组件设置了useState,所以更新的useState的代码,就应该放在该组件,如果其他组件需要更新,则传递更新的函数给其他组件
- 异步渲染:只获取最后一次的值,为了性能提升做的优化
1. useState
- 第二个函数传什么值,就会在下一次发生渲染时将该值设置为第一个函数的状态值
const [