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

momo566
80 阅读3分钟

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

React 特点

  • 声明式
  • 组件化
  • 跨平台编写

React 哲学

  • 提供了ErrorBoundary用于出错处理，使用高阶组件来实现，需要使用生命周期，在类组件中使用，没有在 hooks 中实现；
    • 错误边界是一种React组件。它及其子组件形成一个树型结构，能捕获JavaScript中所有位置的错误，记录下错误，并且还能显示一个后备界面，避免让用户直接看到组件树的崩溃信息。
    • 对比 try / catch ：在事件处理器内部捕获错误，可以使用原生的 try / catch 语句）
  • JS加载阻塞浏览器渲染，没有时间进行布局和UI绘制，解决办法是将重的执行任务拆分成多个新任务（时间切片：虚拟DOM），获得流畅的用户体验。 【复习知识点】DOM 是用一颗逻辑树来表示一个文档，树的每个分支的终点都是一个节点，可以用特定的方式（编写JS、CSS、HTML）来改变这个树的结构，从而改变文档结构、样式或内容。
  • 更新流程
    • 调度器
    • 协调器
    • 渲染器
      • 生成真实DOM
  • 优点
    • 快速响应
    • 组件化
    • 声明式编程
    • 跨平台：只需要修改渲染器
  • 缺点
    • 大型应用需要配套学习
    • 不适合小型应用

React 使用

架构

  • 打包配置：JSX → babel → JS
  • UI
  • 路由：保持页面与URL之间的同步
  • 状态

组件

  • 数据
  • 通信：props、context & redux组件信息共享
  • UI
  • 性能：函数使用useCallback 值或者计算使用useMemo 组件包裹memo

Class组件

继承+构造函数

函数式组件

React16.8之后，推荐使用

  • 没有生命周期
  • 借助hook
  • return JSX
优点
  • 代码量骤减
  • 没有复杂的生命周期
  • 支持自定义hook，逻辑复用方便
Hook 使用
  • 只能在组件（或其他 Hook ）的最顶层使用Hook
  • 只能在 React 函数中调用Hook
    • 自定义Hook必须以 use 开头
  • Hook 中的 state 是完全隔离的

Hook 过期闭包问题 解决：将传递的参数作为依赖

React 常见 API 及作用

image.png

具体使用

如何划分组件

  • Layout
    • 例如：image.png
  • Page
  • 组件

父组件给子组件通信

  • 知道子组件的表现，直接通过 props 通信
  • 不知道子组件的表现，使用 props.children 。

例如： image.png 如果要在 Button 后面增加新的样式，改进前，需要重复写size = props.size；改进后，即用 SizeWrapper 包裹后，会自动将props.size 传给下面的内容。

使用 cloneElement 克隆了一个节点，并传递公共的方法，将commontProps 属性传递到了 child 上，避免对每一行代码，都重复写size = props.size。

子组件给父组件通信

  • 传递信息比如说对象文本等，通过 callback 例如： image.png 父组件中定义一个介质（使用 useRef），将介质传给子组件； 子组件接收传入的介质，给介质添加一些方法，使用 forwardRef 将介质转发给父组件。

组件间共享信息

context & reducer 定义 reducer ，传递 context 例如： image.png

image.png

组件性能优化

  • 问题：没有两个完全相等的函数。（没有两个对象是完全一样的）
  • 解决：使用 useCallback 包裹函数。
useCallback VS useMemo
  • useCallback 返回的是函数，useMemo 返回的是值；
  • 组件挂载位置 当子元素（事件源）事件触发，事件会沿着包含关系，依次往上级传递，每一级都可以感知到事件，直到触发根元素（根源)
avatar
文章
阅读
粉丝