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

XaiKiv
95 阅读5分钟

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

前言

在学习 React 之前，需要了解以下几点：

1. 什么是 React

答:构建用户界面的 JavaScript 库。可以理解为 React 是一个将数据渲染为 HTML 视图开源的 JavaScript 库。

2. 谁开发了 React

答：facebook 开发的，且开源。

3.为什么要学习 React

答：这里以原生的 js 做对比解释，具体由以下几点概括：

  • 原生的 JavaScript 操作 dom 繁琐，效率低。
  • 使用JavaScript 直接操作 dom ，浏览器会进行大量的重绘编排。
  • 原生的 JavaScript 没有组件化编码方案，代码复用率低。

4. React 的特点

  • 采用组件化模式、声明式编码，提高开发效率及组件复用率。
  • 在 React native 中可以使用 React 语法进行移动化开发。
  • 使用虚拟 dom + （优秀的） diffing 算法，尽量减少与真实 dom 的交互。

课堂重点🗒️🖋️

  • React 的历史与应用–介绍 React 的发展历史以及应用场景。
  • React 的设计思路–介绍 React 的设计思想，为什么 React 要设计成这样。
  • React hooks 的写法–介绍基础的 React hooks 写法，以及常用的 hooks。

一、 React 应用

  1. Facebook ，Instagram , Netflix网页版-前端应用开发
  2. lnstagram , Discord , Oculus-移动原生应用开发
  3. 结合Electron-进行桌面应用开发

二、 React 历史

  • 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 介绍了这款全新的框架可移步b站观看该介绍
  • 2014年 今天 生态大爆发，各种围绕 Feact 的新工具/新框架开始涌现。

二、 React 的设计思路

2.1 React 的设计思路- UI 编程痛点。

  1. 状态更新, UI 不会自动更新，需要手动地调用 DOM 进行更新。
  2. 欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
  3. UI 之间的数据依赖关系，需要手动推护，如果依赖链路长，则会遇到 “Caliback Holl”。

2.2 React 的设计思路-响应式与转换式

响应式系统：

image.png

前端 UI：

image.png

2.3 React 的设计思路-响应式编程

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

2.4 React 的设计与实现-组件化

在组件设计中，我们可以看到以下几点内容：

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

具体实例：苹果官网 iPhone 13 pro 购买价格会随着配置的不同而变化

思考：「当前价格」状态属于谁?

image.png

将 onChangeValue() 向下传递( Javascript 中，函数是「一等公民」。同时，React是单向数据流, 子主键不能传给父主键。

思考题解答： 「当前价格」状态属于 Root 节点！！

总结：

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

主键有三个状态，其生命周期如下图：

image.png

2.5 React (hooks)的写法与 React 实现

  1. React (hooks)的写法Hook使用法则： 不要在循环，条件或嵌套函数中调用Hook。

image.png

Virtual DOM(虚拟DOM)

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

How to Diff ?

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

  • 不同类型的元素-替换
  • 同类型的 DOM 元素-更新
  • 同类型的组件元素-递归

React 状态管理库-核心思想将状态抽离到UI外部进行统一管理

2.6 React 状态管理库-推荐

  • redux- Predictable state container for JavaScript apps
  • xstate- State machines and statecharts for the modern web.
  • mobx- Simple, scalable state management.
  • recoil- Recoil is an experimental state managemer with the newest features of React.

2.6 应用框架科普

  • NEXT.JS 硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev , SWC 等,其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是“ Let's Make WebFaster "
  • MODERN.JS 现代Web工程体系 字节跳动 Web lnfra 团队研发的全栈开发框架,内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
  • Blitz 无 API 思想的全栈开发框架，开发过程中无需写 API 调用与 CRUD 逻辑,适合前后端紧密结合的小团队项目。

结尾

今天这节课是第一次接触 React 框架跟语法，算是一个浅浅的入门笔记。

综上，今天又是好好学习的一天！😊

avatar
文章
阅读
粉丝