react 18 基础入门到项目实战总结

此系列笔记的来缘起

此系列笔记，是我学习《千锋react零基础入门到项目实战完整版》的学习笔记，其中也加入了部分自己的理解。

通过此系列笔记，你能得到什么？

• 你可以完整的了解react的基础知识
• 通过实际需求案例驱动知识点吸收，通过幽默风趣讲解驱动学习的积极性，帮助大家成长为React开发高手打下基础。

下面，仅列出这套课程的知识点，点击查看详情，即可查看详细内容。

React介绍

• 1.React起源与发展
• 2.React与传统MVC的关系
• 3.React的特性
• 4.虚拟DOM

查看详情

编写第一个react应用程序

查看详情

JSX 部分

• JSX语法 查看详情
• JSX列表渲染 查看详情
• jsx 条件渲染 查看详情
• JSX实例 查看详情

react组件

• 类式组件
• 函数式组件

查看详情

react事件

• 绑定事件
• 事件handler的写法
• Event 对象

查看详情

Ref的应用

• 给标签设置ref=“username”
• 给组件设置ref=“username”
• 新的写法

查看详情

组件的数据挂载方式 – 状态(state)

• 状态(state)
• 定义state
• setState

查看详情

组件的数据挂载方式 – 属性 (props)

查看详情

组件的数据挂载方式 – 属性vs状态

查看详情

表单中的受控组件与非受控组件

• 非受控组件 （031）
  • 默认值
• 受控组件

查看详情

组件通信的方式

• 父子组件通信方式 查看详情
• 非父子组件通信方式 查看详情
  • 状态提升(中间人模式)
  • 发布订阅模式实现
  • context状态树传参

插槽

查看详情

React生命周期

• 初始化阶段
• 运行中阶段
• 销毁阶段
• 新生命周期的替代
• react中性能优化的方案
  • shouldComponentUpdate
  • PureComponent

查看详情

React子封装swiper组件

查看详情

React Hooks

• 使用hooks理由 查看详情
• useState(保存组件状态)
• useEffect(处理副作用)和useLayoutEffect (同步执行副作用)
• useEffect和useLayoutEffect有什么区别？
• useCallback(记忆函数)
• useMemo 记忆组件
• useRef(保存引用值)
• useReducer和useContext(减少组件层级)
• 自定义hooks

查看详情

React 路由

• 什么是路由？
• 路由安装
• 路由使用
• (1) 路由方法导入
• (2) 定义路由以及重定向
• (3) 嵌套路由
• (4) 路由跳转方式
• (5) 路由传参
• (6) 路由拦截

查看详情

router V6

项目注意 – 反向代理

查看详情

项目注意 – css module

查看详情

Flux与Redux

• redux介绍及设计和使用的三大原则
• redux工作流
• 与react绑定后使用redux实现案例
• redux原理解析
• reducer 扩展

查看详情

• redux中间件 查看详情
• Redux DevTools Extension 查看详情

react-redux

• 介绍
• 容器组件与UI组件
• Provider与connect
• HOC与context通信在react-redux底层中的应用
• 高阶组件构建与应用
• Redux 持久化

查看详情

UI组件库

• ant-design （PC端）
• antd-mobile （移动端）

查看详情

Immutable

• Immutable.js介绍
• 深拷贝与浅拷贝的关系
• Immutable优化性能的方式
• Immutable中常用类型（Map，List）
• Immutable+Redux的开发方式
• 缺点

查看详情

Mobx（103-107）

• Mobx介绍
• Mobx与redux的区别
• Mobx的使用
• mobx-react的使用
• 支持装饰器

查看详情

TS

• typescript
• 安装
• 声明
• 变量声明
• 义普通函数
  • 接口描述形状
  • 传参
  • 类型断言as
• 定义普通类

查看详情

• 定义类组件 查看详情

• 定义函数式组件

  • useRef
  • useContext
  • useReducer

查看详情

• 父子通信
• 路由
  • 编程式导航
  • 动态路由

查看详情

• redux 查看详情

styled-components

• 基本
• 透传props
• 基于props做样式判断
• 样式化任意组件(一定要写className )
• 扩展样式
• 加动画

查看详情

单元测试

• 挂载组件
• 测试组件渲染出来的 HTML
• 模拟用户交互

查看详情

redux-saga

• redux-saga 简介 查看详情
  -redux-saga 常用api 查看详情
• redux-saga 使用案例 查看详情

React补充（129-133）

• Portal
  • 1、用法
  • 2、在protal中的事件冒泡
• Lazy 和 Suspense
  • 1、React.lazy 定义
  • 2、如何使用React.lazy
• forwordRef
  • 未使用forwordRef
  • 使用forwardRef
• Functional Component缓存
  • 为啥起memo这个名字？
  • 作用
  • 与PureComponent 区别
  • 用法

查看详情

React扩展 GraphQL

• （1）介绍与hello 查看详情
• （2）参数类型与传递 查看详情
• （3）mutation
• （4）结合数据库 查看详情
• （5）客户端访问
• （6）结合React

查看详情

React扩展 dva

• dva 应用的最简结构 查看详情
• 数据流图 查看详情

查看详情

React扩展 umi

• 安装脚手架
• 目录

查看详情

• 路由 查看详情

• mock功能

• 反向代理

查看详情

UmiJS 路由案例

如何使用umijs+antd mobile IndexBar组件打造城市选择功能

• antd 查看详情
• dva集成 查看详情