响应式系统与 React | 青训营笔记

凤之兮原
194 阅读5分钟

这是我参与【第四届青训营】笔记创作活动的第 11 天，今天学习了 **响应式以及 React ** 的一些知识点

前置知识

  1. HTML、CSS、JS 基础
  2. 基础的数据结构/算法知识，如二叉树，深度遍历等
  3. 会使用浏览器提供的 DOM API 来修改 DOM，更新 UI

1. React 的历史与应用

2010 年，Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计

2011 年，Jordan Walke 创造了 FaxJS，也就是后来的 React 原型，如下图

2012 年，在j Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造了 React

2013 年，React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架

2014 年 - 今天，生态大爆发，各种围绕 React 的新工具 / 新框架开始涌现

image.png

image.png

2.React 的设计思路

2.1 UI 编程的痛点

  • 状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新
  • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
  • UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到Callback Hell

2.2 响应式与转换式

image.png

2.2.1 响应式编程

响应式系统 image.png

  • 状态更新，UI 自动更新
    • “状态更新，UI不会自动更新，需要手动地调用 DOM 进行更新。”
  • 前端代码组件化，可复用，可封装
    • “欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
  • 状态之间的互相依赖关系，只需声明即可
    • “UI 之间的数据依赖关系，需要手动维护。如果依赖链路长，则会遇到Callback Hell(回调地狱)”

前端 UI image.png

image.png

2.3 组件化

image.png

总结

  1. 组件是 组件的组合 / 原子组件
  2. 组件内拥有状态，外部不可见
  3. 父组件可将状态传入组件内kk部

2.4 状态归属问题

思考

  1. React 是单向数据流，还是双向数据流
  2. 如何解决状态不合理上升的问题
  3. 组件的状态改变后，如何更新 DOM ？

2.5 关于组件设计

  1. 组件声明了状态和 UI 的映射
  2. 组件有 Props / State 两种状态
  3. “组件”可由其他组件拼装而成

组件代码会是什么样子呢？

  1. 组件内部有用私有状态 State
  2. 组件接收外部的 Props 状态提供复用性
  3. 根据当前的 State / Props，返回一个 UI

2.6 生命周期

image.png

3.React（hooks）的写法

image.png

image.png

4.React 的实现

4.1 实现上会出现的问题

  1. JSX 不符合 JS 的标准
  2. 返回的 JSX 发生改变时，如何更新 DOM
  3. State / Props 更新时，要重新出发 render 函数

4.1.1 第一个问题

image.png

4.1.2 第二个问题

Virtual DOM ( 虚拟 DOM )

Virtual DOM 是一种用于和真实 DOM 同步，而在 js 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和 DOM 可以建立 一一对应的关系

它赋予了 React 声明式的 API：您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。

diff 重点重点！面试大概率会问 image.png

怎样的 Diff 才能让更新次数最少并且更新速度最快呢？

image.png

完美的最小 Diff 算法，需要 O(n^3) 的复杂度 牺牲理论最小 Diff，换取时间，得到了 O(n) 复杂度的算法

Heuristic O(n) Algorithm，翻译过来是：启发式O (n)的算法

image.png

5.React 状态管理库

5.1 核心思想

image.png

将状态抽离到 UI 外部进行统一管理

5.2 状态管理库推荐

  1. Redux

Predictable state containre for JavaScript apps.

  1. xState

state machines and statecharts for the modern web.

  1. mobx

Simple, scalable state management.

  1. recoil

Recoil is an experimental state management with the newest features of React.

5.2.1 状态机

VsCode 里面有个一个 XState 插件，可以看到你设置的一些状态示意图，如下： image.png 当前状态，收到外部事件，迁移到下一个状态

5.2.2 Modern.js / Reduck

image.png

6.应用级框架科普

  1. Next

硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev，SWC 等，其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster”

  1. Modern.js

字节跳动 Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实现，可以减少很多调研选择工具的时间

  1. Blitz

无 API 思想的全栈开发框架，开发过程中无需 API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目

image.png

总结

本文主要介绍了一些 React 的知识点，像比较经典的响应式编程，组件设计的问题以及一些React中常见的知识点等。

React 和 Vue 是目前主流的框架，相信很多学习过 Vue 和 React 的同学对这两个框架也有自己独特的见解，我们主要要学习框架中的设计思想，不断开阔自己的视野，这样在以后新技术出现的时候才能稳定自身，快速提高自己~

avatar
文章
阅读
粉丝