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集成 查看详情

你可能感兴趣的:(前端杂货铺,react.js,前端,javascript)