【第二届字节青训营 - 寒假前端场】响应式系统与 React学习笔记
响应式系统与 React学习笔记
UI编程痛点:
- 状态更新,UI不会自动更新,需要手动地调用DOM进行更新。函数是js中的一等公民。
- 欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
- UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell"。
响应式与转换式系统:
响应式系统是能灵敏响应请求的(Responsive),能回复的(Resilient),可伸缩扩展的(Elastic),基于消息驱动的(Message Driven)的系统。
响应式系统的操作流程如下:
相应的前端UI更新的过程:
响应式编程的好处
- 状态更新,UI自动更新。
- 前端代码组件化,可复用,可封装。
- 状态之间的互相依赖关系,只需声明即可。
组件化组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程,有多种属性、状态反映其内部特性。
知识总结:
- 1.组件是组件的组合/原子组件
- 2.组件内拥有状态,外部不可见
- 3.父组件可将状态传入组件内部
组件状态归属问题:
状态管理只是一种实现跨组件通信和数据共享的方式。它创建了一个具体的数据结构来表示您可以读写的应用程序状态。组件状态归属于两个节点向上寻找到最近的祖宗节点。
思考:
1.React是单向数据流,还是双向数据流?
答:单向数据流,因为子组件不能传数据给父组件。
2.如何解决状态不合理上升的问题?
答:采用状态管理库。创建状态管理库是为了解决我们电子商务应用程序中的问题。 它提供了一个名为 store 的 JavaScript 对象,一旦设置,它就会包含应用程序中的所有状态,并在必要时更新它们。
3.组件的状态改变后,如何更新DOM?
答:采用react实现dom更新的算法。
组件设计
1.组件声明了状态和UI的映射。
2.组件有Props/State两种状态。
Props:外部传入的状态,开放了接口。其中props是传递给组件的(类似于函数的形参),而state是在组件内部被组件自己管理的(类似于在一个函数内声明的变量)。state是组件自己管理数据,控制自己的状态,可变;props是外部传入的数据参数,不可变。
对Props的理解:组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流,所以props基本上也就是从服父级组件向子组件传递的数据。
3.“组件”可由其他组件拼装而成。
4.组件的代码是什么样的?
-
组件内部拥有私有状态State。
-
组件接受外部的Props状态提供复用性。
-
根据当前的State/Props,返回一个Ul。
React(hooks)的写法
副作用:组件对外部造成影响。不是一个纯函数。需要用useEffect()函数去执行。在组件mount的时候执行一次。与明确的执行时间。useEffect()函数的写法如下:uesEffect(( )=> { } , 数组变量)
Hooks()函数:挂载到react,是一些可以让你在函数组件里"钩入" React、state 以及生命周期等特性的函数。可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
好处:
- Hooks 让函数组件内部有了维护状态的能力
- Hooks带来了组件的逻辑复用能力
useState传入一个初始值,返回一个状态,和set该状态的函数,用户可以通过调用该函数,来实现状态的修改。 useEffect传入一个函数,和一个数组,数组是状态的数组,称作依赖项,该函数在mount时,和依赖项被set的时候会执行。 有“副作用”的函数,要传入useEffect来执行。副作用代表除了单纯的计算之外,还要做其它的一些事情,比如网络请求,更新DOM,localStorage存储数据等。
Hooks()函数不能在循环或者递归里面调用。
react实现
曾存在的问题:
-
JSX不符合JS标准语法
-
返回的JSX发生改变时,如何更新DOM
Virtual DOM 是一种用于和真实DOM同步,而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一一对应的关系。 它赋予了React声明式的API:您告诉 React希望让U山是什么状态,React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
真实dom不是js中的对象,是浏览器内部维护的状态,只能dom接口修改。js可以设置与dom对应的对象。
声明式与指令式编程的对比:
- 声明式编程:程序在不明确列出必须执行的命令或步骤的情况下描述其预期结果。特例:响应式编程(使用异步数据流进行编程)
- 命令式编程的主要思想是关注计算机执行的步骤,即一步一步告诉计算机先做什么再做什么。
为什么声明式不移植到浏览器?
答:如果声明式移植到浏览器,那么导致浏览器自由度降低了。事实上,浏览器只提供底层的平台,适用于各种编程范式。
react如何实现?
完美的最小Diff算法,需要O(n3)的复杂度。
(全局最优) 牺牲理论最小Diff,换取时间,得到了O(n)复杂度的算法:
(局部最优) Heuristic O(n)Algorithm启发式算法
启发式算法定义:一个基于直观或经验构造的算法,在可接受的花费(指计算时间和空间)下给出待解决组合优化问题每一个实例的一个[可行解],该可行解与最优解的偏离程度一般不能被预计。
How to Diff?(O(n))
- 不同类型的元素----替换
- 同类型的DOM元素----更新
- 同类型的组件元素----递归
State/Props更新时,要重新触发render函数。render 函数
跟 template
一样都是创建 html 模板的,但是有些场景中用 template
实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数
。
05.React 状态管理库
状态管理库核心思想:将状态抽离到UI外部进行统一管理。解决状态共享的问题。缺点:降低组件的复用性,与store的强耦合。一般用在业务代码如app中,lib少用。
状态机:状态机是有限状态自动机的简称,是现实事物运行规则抽象而成的一个数学模型。所说的状态机是有限状态机,也就是被描述的事物的状态的数量是有限个。状态机可归纳为4个要素,即现态、条件、动作、次态。这样的归纳,主要是出于对状态机的内在因果关系的考虑。“状态”和“事件”是因,“动作”和“变换”是果。
①状态:是指当前所处的状态。
②事件:又称为“事件”,当一个条件被满足,将会触发一个动作,或者执行一次状态的迁移。
③动作:条件满足后执行的动作。动作执行完毕后,可以迁移到新的状态,也可以仍旧保持原状态。动作不是必需的,当条件满足后,也可以不执行任何动作,直接迁移到新状态。
④变换:条件满足后要迁往的新状态。“次态”是相对于“现态”而言的,“次态”一旦被激活,就转变成新的“现态”了。
应用场景:哪些状态应该放在状态管理库里面?
- 这些状态被整个app拥有(√)(发起一次请求即可)
- 状态被app部分所拥有(×)。
MCDSRN.Js
现代Web工程体系
06.应用级框架科普
- NEXT:硅谷明星创业公司Vercel的React开发框架,稳定,开发体验好,支持Unbundled Dev,SWC等,其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster”
- MODERN.JS:字节跳动Web Infra团队研发的全栈开发框架,内置了很多开箱即用的能力与最佳实践,可以减少很多调研选择工具的时间。
- Blitz:无API思想的全栈开发框架,开发过程中无需写API 调用与CRUD逻辑,适合前后端紧密结合小团队项目。
大作业:
1.React组件的render函数,在哪些时机下,会被重新执行?
2.React 这种函数式编程,和vue这种基于模版语法的前端框架,各有什么优点和缺点?
3.React 推荐使用组合来进行组件的复用,而不是继承,背后有什么样的考虑?
答疑
代码高聚合、低耦合。目的是使程序模块的可重用性、移植性大大增强。. 通常程序结构中各模块的内聚程度越高,模块间的耦合程度就越低。
声明:
本文大部分来自牛岱老师上课内容
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战