react 18 基础入门到项目实战总结
此系列笔记的来缘起此系列笔记,是我学习《千锋react零基础入门到项目实战》的学习笔记,其中也加入了部分自己的理解。通过此系列笔记,你能得到什么?•你可以完整的了解react的基础知识。•通过实际需求案例驱动知识点吸收,通过幽默风趣讲解驱动学习的积极性,帮助大家成长为React开发高手打下基础。下面,仅列出这套课程的知识点,点击查看详情,即可查看详细内容。
·
此系列笔记的来缘起
此系列笔记,是我学习《千锋react零基础入门到项目实战完整版》的学习笔记,其中也加入了部分自己的理解。
通过此系列笔记,你能得到什么?
- 你可以完整的了解react的基础知识
- 通过实际需求案例驱动知识点吸收,通过幽默风趣讲解驱动学习的积极性,帮助大家成长为React开发高手打下基础。
下面,仅列出这套课程的知识点,点击查看详情,即可查看详细内容。
React介绍
- 1.React起源与发展
- 2.React与传统MVC的关系
- 3.React的特性
- 4.虚拟DOM
编写第一个react应用程序
JSX 部分
react组件
- 类式组件
- 函数式组件
react事件
- 绑定事件
- 事件handler的写法
- Event 对象
Ref的应用
- 给标签设置ref=“username”
- 给组件设置ref=“username”
- 新的写法
组件的数据挂载方式 – 状态(state)
- 状态(state)
- 定义state
- setState
组件的数据挂载方式 – 属性 (props)
组件的数据挂载方式 – 属性vs状态
表单中的受控组件与非受控组件
- 非受控组件 (031)
- 默认值
- 受控组件
组件通信的方式
插槽
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) 路由拦截
项目注意 – 反向代理
项目注意 – css module
Flux与Redux
- redux介绍及设计和使用的三大原则
- redux工作流
- 与react绑定后使用redux实现案例
- redux原理解析
- reducer 扩展
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
React补充(129-133)
- Portal
- 1、用法
- 2、在protal中的事件冒泡
- Lazy 和 Suspense
- 1、React.lazy 定义
- 2、如何使用React.lazy
- forwordRef
- 未使用forwordRef
- 使用forwardRef
- Functional Component缓存
- 为啥起memo这个名字?
- 作用
- 与PureComponent 区别
- 用法
React扩展 GraphQL
React扩展 dva
React扩展 umi
- 安装脚手架
- 目录
-
路由 查看详情
-
mock功能
-
反向代理
更多推荐
已为社区贡献10条内容
所有评论(0)