字节前端青训营笔记——React基础与实践

Trans_Monica
104 阅读5分钟

01 React简介与特性

简介 什么是React（反应）———用于构建用户界面的JavaScript库。

特性 声明式、组件化、跨平台编写

React哲学（Thinking In React）

React是用JavaScript构建 快速响应 的 大型Web应用程序 的首选方式之一。它在Facebook和Instagram上表现优秀。 等待资源加载时间 和 大部分情况下浏览器单线程执行 是影响web性能的两大主要原因。

等待资源加载 一次请求太多资源？ 网络请求慢？ 资源加载失败？

  • √React.Lazy
  • √React.Suspense（悬念）
  • √ErrorBoundary（错误边界）

浏览器线程执行 JS 执行 浏览器计算样式布局 UI绘制

  • √异步更新
  • √时间切片
  • √React Fiber（纤维）

React 哲学_Lazy& Suspense

image.png

样例演示

image.png

React 哲学_ErrorBoundary

image.png

样例演示

image.png

React 哲学_更新流程

Scheduler (调度器)

  • 维护时间切片 (类似requestldleCallback（请求回拨）)
  • 与浏览器任务调度
  • 优先级调度

Reconciler (协调器)

  • 将JSX 转化为 Fiber
  • Fiber 树对比(双缓存)
  • 确定本次更新的 Fiber

Renderer(渲染器)

  • 渲染器用于管理一棵 React 树
  • 使其根据底层平台进行不同的调用

image.png

image.png

image.png

总结_React优缺点

优点！！

  1. 快速响应: Fiber
  2. 组件化:复用性强
  3. 声明式编程
  4. 跨平台: 只需修改渲染器

缺点? ?

  1. 大型应用需要配套学习 状态管理、路由工具
  2. 不适合小型应用，需要用 babel 处理

02 React基础温故知新

用 React 开发 web应用

image.png

用 React 开发 web 应用_组件

image.png

Class 组件

  • 继承 + 构造函数
  • this
  • 生命周期
  • render 方法

image.png

函数式组件

  • 没有生命周期
  • 借助 Hook(钩)
  • return JSX

image.png

函数式 相较于 Class 的优点

  1. 代码量骤减，组件干净清爽。
  2. 没有复杂的生命周期
  3. 支持自定义 hook，逻辑复用方便。

组件 和 Hook 的关系

我们将 UI 拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。 组件相当于原子。 hook 贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks 更贴切于电子。

Hook 规则 & 原理

只能在最顶层使用 Hook

React 怎么知道哪个 state 对应哪个 useState?

答案是 React 靠的是 Hook 调用的顺序

image.png

image.png

只能在 React 函数中调用 Hook

  • 在React函数组件中 或自定义 Hook 中调用
  • 自定义 Hook 必须以 use 开头
  • Hook 中的 state 是完全隔离的

image.png

Hook 过期闭包问题

在 JS中，函数运行的上下文是由定义的位置决定的当函数的闭包包住了旧的变量值时，就出现了过期闭包问题

image.png

image.png

React常见API及作用

API作用

image.png

React常见 Hook 及作用

image.png

03 业务场景案例

image.png

如何划分组件? _Layout(布局)

  • Navbar(导航栏)
  • Main Content
  • Footer
  • Floating Button

image.png

image.png

如何划分组件? _Page

  • Banner(横幅)
  • CardGroup
  • Slider GroupO Help Docs
  • Footer Banner(页脚横幅)

image.png

如何划分组件?_Component(组成部分)

BlockHeader(阻止标头)

  • tag
  • title

BlockWrapper(块包装器)

  • backgroundType
  • animate?(活的): boolean;
  • theme?: "dark" | "light"

SlideButton

  • onClick(direction, index)
  • icon?: ReactNode
  • animate?: boolean

SizeText

  • 通过 className 控制
  • 封装成组件
  • 安装主题包

AnimationWrapper(动画包装器)

  • animationName?:string
  • animationDuration?:number

image.png

父组件给子组件通信_案例

知道子组件的表现，直接通过 props 传递即可

不知道具体子组件表现呢? props.children

样例演示

image.png

父组件给子组件通信_代码

image.png

image.png

image.png

子组件给父组件通信_案例

样例演示

image.png

子组件给父组件通信_代码

image.png

image.png

组件间共享信息_案例

image.png

样例演示

image.png

组件间共享信息_context & reducer(减速器)

image.png

image.png

image.png

image.png

组件间共享信息 react-redux(还原)

image.png

  • mapStateToProps(映射状态到道具)
  • mapDispatchToProps(映射调度到道具)

image.png

image.png

image.png

组件性能优化_案例

image.png

increment(增量)

image.png

image.png

image.png

image.png

state.name 发生变化导致

  1. 重新渲染 Wrapper
  2. 重新渲染 Counter
  3. 重新计算 calcValue

可以优化的方向?

  1. Count 不变的场景下，Counter 不重新渲染
  2. Count 不变场景下，不重新计算 calcValue

组件性能优化_代码

Question 1.Count 不变的场景下，Counter 不重新渲染

image.png

Question 1.1:没有两个完全相等的函数?

image.png

Question 2.Count 不变的场景下，不重新计算calcValue

image.png

组件挂载位置_案例

image.png

  • refWrapper(ref包装器)
  • visible(看得见的)
  • popup(弹出)

样例演示

image.png

image.png

image.png

组件挂载位置_代码

image.png

portal(入口)

createPortal 将真实 DOM 的渲染位置也改变了 !

image.png

组件挂载位置_冒泡

样例演示

image.png

image.png

通过 createPortal 改变了组件的真实渲染位置，那么

  1. 点击 blue-按钮 会不会发生冒泡?
  2. 会冒泡到那个容器呢?
  • A:蓝色容器
  • B:黄色容器
  • C:两个容器均有

A:一个从 portal 内部触发的事件会一直冒泡至包含 React 树的祖先，即便这些元素并不是 DOM 树中的祖先。

image.png

如何进行逻辑复用_useRequest 案例

手动实现一个 useRequest。

image.png

样例演示

image.png

如何进行逻辑复用_useRequest 分析

  1. 点击发送请求?
  2. 前置条件完成后自动请求?
  3. 轮询请求?

image.png

async(异步)

image.png

params(参数) interval（区间）

image.png

polling(轮询)

image.png

image.png

如何进行逻辑复用_useRequest run 代码

image.png

image.png

image.png

image.png

04 笔记总结

总结

  1. React 优化资源加载 &快速响应
  2. 表现优化: ErrorBoundary,Suspense，Lazy
  3. React 更新流程 Scheduler & Reconciler & Renderer
  4. 函数式组件和 Class 组件
  5. Hook 规则，为什么要保证顺序?
  6. 常见API及常见Hook
  7. 在项目中如何拆分组件粒度
  8. 父子组件通信: cloneElement,forwardRef
  9. 组建信息共享: useContext,useReducer VS Redux
  10. 性能优化: useCallback,useMemo,momo
  11. 你不知道的冒泡: Portal
  12. 自定义 useRequest 实现逻辑复用

学习资料及工具

avatar
文章
阅读
粉丝