React基础与实践｜青训营笔记

用户9792705635044
47 阅读4分钟

第十节 React基础与实践

一、React特性与简介

01. React简介

  1. 定义：React：用于构建用户界面的JS库；
  2. 特点：
  • 声明式：只关注结果，而不关注如何实现；React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件；
  • 组件式：将页面分为多个组件；构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI
  • 跨平台编写：不同渲染器都可以使用，实现了跨平台编写；

02. 特性

  1. React如何快速响应？
  • 影响Web性能的两大主要原因：

    • 等待资源加载；

      • 一次性加载过多资源——React.Lazy；
      • 网络请求慢——使用资源加载的UI提示；
      • 资源加载失败——ErrorBoundary；

    • 大部分情况下浏览器单线程执行；

      • JS执行；
      • 浏览器计算样式布局；
      • UI绘制；
  1. React更新流程：

  • Scheduler（调度器）：

    • 维护时间切片；
    • 与浏览器任务调度；
    • 优先级调度；

  • Reconciler（协调器）：

    • 将JSX转化为Fiber；
    • Fiber树对比（双缓存）；
    • 确定本次更新的Fiber；
    • 更新完该Fiber之后才移交，避免更新值进行了一部分；

  • Renderer（渲染器）：

    • 渲染器用于管理一个React树；使其根据底层平台进行不同的调用；在vue中称为虚拟DOM；在React中称为Fiber树；
    • Fiber树是双向链表结构；其生成过程可以是异步的，取决于此时浏览器的任务情况；
  1. 图示： image.png
  • 内存中有两个Fiber树，形成双缓存结构：
    • 一个是当前的树【Current Tree】：页面DOM对应的树；
    • 一个是正在构建的树【workInProgress Tree】；
  • 构建结束后，会用【workInProgress Tree】替代【Current Tree】；
  • 将Fiber Tree提交给渲染器，然后完成更新；
  1. react和JS对比；
  • React一定比JS快吗：对于渲染而言，React渲染速度比JS慢；
  • 但是用户的需求并非只是“快”，而是页面不出现卡顿，因此React的显示效果更好，保证用户使用效果；

03. 总结

  • 优点：
    • 快速响应：Fiber；
    • 组件化：复用性强；
    • 声明式编程；
    • 跨平台：只需修改渲染器；
  • 缺点：
    • 主要应用于大型应用，大型应用需要配套学习状态管理、路由工具；
    • 不适合小型应用，需要用babel处理；

二、React基础温故知新

01. 用React开发Web应用

  1. React Web应用：
  • 架构：打包配置：JSX -> Babel -> JS还在优化和错误降级；
  • UI：可复用UI -> 组件 -> 页面。可复用逻辑抽离成hook；
  • 路由：React Router 向应用中快速地添加试图和数据流，保持页面与URL间的同步；
  • 状态：多页面多组件共享信息redux & context；
  1. 组件：
  • 数据：
    • 通过定义state操作视图Mount时获取数据更新state Ref保存与视图无直接关系的值unMount前清空Ref；
  • 通信：
    • pros父子组件通信，context & redux组件信息共享；
  • UI：
    • 数据决定视图，通过Ref获取到DOM；
  • 性能：
    • 函数使用useCallback值或者计算使用useMemo组件包裹memo；

02. React基础

2.1 组件

  1. class组件：
  • 继承 + 构造函数；
  • this；
  • 生命周期；
  • render方法；
  1. 函数式组件：
  • 没有生命周期；
  • 借助hook；
  • 可读性更好一些；
  • return JSX；
  1. 函数式组件 相较于 class组件 的优点：
  • 代码量骤减，组件干净清爽；
  • 没有复杂的生命周期；
  • 支持自定义hook，逻辑复用方便；
  1. 组件和 hook 的关系：
  • 将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件，组件相当于原子；
  • hook贴近组件内部运行的各种概念逻辑，effct、state、context等。hooks更贴近于电子；
  • hook无法渲染在页面上，但是组件可以；

2.2 Hook规则 & 原理

  1. 只能在最顶层使用hook；
  • React如何知道哪个state对应哪个useState：React依据【hook调用顺序】；
  1. 只能在React函数中调用Hook：
  • 在React函数组件中或自定义Hook中调用；
  • 自定义Hook必须以use开头；
  • Hook中的state是完全隔离的；
  1. Hook过期闭包问题：
  • 在JS中，函数运行的上下文是由定义的位置决定的，当函数的闭包包住了旧的变量值时，就出现了过期闭包问题；

2.3 React常见API及作用

image.png

三、具体场景案例

组件间共享信息： image.png

组件性能优化： image.png

UseCallback()可以避免多次渲染时，Counter不会重新渲染（由于每次渲染结果都会不一样）

组件挂载位置案例

四、补充

React的卸载阶段

  • 卸载阶段：属于组件的最后生命周期，组件被销毁并从DOM中删除；
  • componentWillUnmount（卸载），类似于Vue的befroeDestroy，表示组件即将被销毁：
  • shouldComponentUpdate（了解）：
    • 是控制更新阶段的开关，用于控制是否更新，返回true正常更新，返回false不更新；
avatar
文章
阅读
粉丝