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

realian
124 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第1天。

课堂笔记

本堂课重点内容：

  1. React 的历史与应用 - 介绍 React 的发展历史以及应用场景。
  2. React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样。
  3. React hooks 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks。
  4. React的实现
  5. React状态管理库
  6. 应用级框架科普

该课程需要这些前置知识：

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

详细知识点介绍

01. React的历史与应用课程重点

  • 前端应用开发历程：如Netflix网页版，Facebook，Instagram。

  • 移动原生应用开发：如Oculus，Instagram，discord。

  • 结合 Electron 的桌面应用开发：

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

2011年Jordan Walke创造了FaxJS,也就是后来的React原型：

image.png

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

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

image.png

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

image.png

02. React的设计思路课程重点

  1. UI 编程痛点
  2. 响应式与转换式
  3. React 设计与实现 - 组件化
  4. React 设计与实现 – 状态归属问题
  5. React 设计与实现 – 生命周期

UI编程痛点

image.png

image.png

01.状态更新，UI不会自动更新，需要手动地调用DOM 进行更新。

02.欠缺基本的代码层面的封装和隔离，代码层面没有组件 化。

03.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell'"。

响应式与转换式

image.png

响应式编程

image.png

image.png

01.状态更新，UI自动更新。 “状态更新，UI不会自动更新，需要手动地调用DOM进行更新。

02.前端代码组件化，可复用，可封装。 “欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”

03.状态之间的互相依赖关系，只需声明即可。 "U川之问的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 "Callback Hell"。"

React 设计与实现 - 组件化

image.png 组件设计:

  1. 组件声明了状态和U1的映射。
  2. 组件有Props/,State两种状态。
  3. “组件”可由其他组件拼装而成。 组件状态：
  4. 组件内部拥有私有状态State
  5. 组件接受外部的Props状态提供复用性
  6. 根据当前的State/Props,返回一个Ul。

总结：

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

React 设计与实现 – 状态归属问题

image.png

image.png

image.png

image.png

image.png 思考：

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

React 设计与实现 – 生命周期

image.png

03.React （hooks）的写法与 React 实现课程重点

  1. 代码介绍
  2. React 的实现基本概要
  3. React 的实现 - Problem 1 & 2
  4. React 的实现 - How to Diff

代码介绍

image.png

image.png

React 的实现基本问题

  • JSX不符合JS标准语法
  • 返回的JSX发生改变时，如何更新DOM
  • State/Props更新时，要重新触发render函数

React 的实现 - Problem 1 & 2

problem1

image.png

problem2

Virtual DOM(虚拟DOM)

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

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

image.png

React 的实现 - How to Diff

image.png

  • 完美的最小Df算法，需要O(n^3)的复杂度。
  • 牺牲理论最小Df,换取时间，得到了O()复杂度的算法：
  • Heuristic O(n)Algorithm
不同类型的元素
同类型的DOM元素
替换
更新
同类型的元素
递归

04.React状态管理库与应用级框架科普课程重点

1. React 状态管理库 - 核心思想

image.png

2. React 状态管理库 - 推荐

image.png

3. React 状态管理库 - 状态机

image.png

4. React 状态管理库 - Modern.js/Reduck

image.png

5. 应用级框架科普

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

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

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

image.png

image.png

image.png

实践练习例子：

  • 有什么实践举例帮助理解知识点？

课后个人总结：

  • 本章有什么知识点不容易掌握？
  • 什么地方容易与其他内容混淆？
avatar
文章
阅读
粉丝