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

PureNight
76 阅读6分钟

这是我参加[第五届青训营]伴学笔记创作活动的第6天

本堂课重点知识

  • 了解前端框架 React 的发展历史、应用场景
  • 了解React的设计思路、实现、状态管理库和React（hooks）的写法
  • 了解基于React的应用级框架

发展历史

由需求产生发展历史 image.png 2013年，React正式开源，可在油管或b站观看以下视频 image.png 看似历史倒退，但从14年到今React生态爆发后告诉我们该新技术是成功的 image.png

应用场景

  • 前端应用开发，如Facebook，instagram，netflix网页版
  • 移动原生应用开发，如instagram，discord，oculus
  • 结合Electron，进行桌面应用开发
  • ...... image.png

从0推演React的设计思路

1.明白UI编程痛点

场景描述： 网上购物时每选择一个选项就需要更改页面上两处显示总价的位置，虽然通过JS每个选项都挂载一个onClick事件和onChangeValue()函数能够实现，过程式编程套路，但后期业务繁杂后会混乱。

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

2.由以上痛点将转换式向响应式转变

image.png 响应式注意的点：监听事件，监听完之后发生事情，执行既定的回调，然后状态变更，最后UI更新。
于是，响应式编程有以下三个特点：

  1. 状态更新,UI自动更新。
  2. 前端代码组件化,可复用,可封装。
  3. 状态之间的互相依赖关系,只需声明即可。

3.React设计与实现

组件化

image.png

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

状态归属问题

想清楚该变量定义后状态的属于组件中的哪个节点
答：离子组件最近的父组件的那个节点，在当前这个例子中需要将总价存储在Root节点中，但这种行为是较为危险的，因为两个组件需要共享状态时需要上移，但如果都上移到Root节点就失去组件复用的作用了，所以就需要后续的状态管理库，解决状态不合理上移的问题。 ——状态归属于两个节点向上寻找到最近的祖宗节点
React是单向数据流，永远是父组件给子组件传递，但父组件可以通过传递函数给子组件，然后子组件执行对应的事件改变父组件的状态
先自行思考，后续章节会解决：

  • 通过状态管理库如何解决状态不合理上移的问题；
  • 组件状态改变后，如何实现更新dom的过程；

总结：组件设计

  1. 组件声明了状态和UI的映射。（函数）
  2. 组件有Props（外部传入）/State（内部私有）两种状态。
  3. "组件"可由其他组件拼装而成。

组件代码满足的条件：

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

组件生命周期

挂载、卸载、状态更新 image.png

hooks的写法

hook官方解释是可以挂载react生命周期上的函数

state和effect的触发时机和次数不同，前者是每次状态更改都会，而后者只有挂载或更新时才会有 image.png

image.png

Hook使用法则

不要在循环，条件或嵌套函数中调用hook

错误写法：
if（x>1）{
  const [y, setY] = useState(0);
}

React的实现

首先需要思考使用hook时的问题

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

解决方法

  • 转译 image.png
  • 采用Virtual DOM (虚拟DOM)

Virtual DOM 是一种用于和真实DOM同步,而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一一对应的关系。
它赋予了React声明式的API:您告诉React希望让UI是什么状态,React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
image.png 为了实现类似diff函数差不多的操作，但比起每次都销毁重新加载所有dom的性能能够降低,需要兼具更新次数少和计算速度快

指令式编程（eg.JS）->声明式编程->响应式编程（声明式编程的一个类）

How to diff

完美的最小Diff算法，需要O(n^3)的复杂度。
牺牲理论最小Diff,换取时间，得到了O (n)复杂度的算法：
启发式算法：Heuristic O(n) Algorithm 比如路径问题的A*算法
策略：
不同类型的元素 -> 替换
同类型的DOM元素 -> 更新
同类型的组件元素 -> 递归

React状态管理库

核心思想

将需要共享的（依据业务要求，较为主观）状态抽离到UI外部进行统一管理 image.png 但也有需要将状态放在组件内部管理的业务，所以以上将所有状态存在store统一管理的坏处是降低复用性

推荐常见的React状态管理库

redux、xstate、mobx、recoil
初学任选，若公司有要求具体择一

状态机

当前状态,收到外部事件,迁移到下一个状态
eg.交通灯 image.png 字节跳动开发的现代web工程体系开源框架Modern.js-Reduck image.png

应用级框架科普

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