【第二届字节青训营 - 寒假前端场】响应式系统与 React学习笔记

响应式系统与 React学习笔记

UI编程痛点:

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

响应式与转换式系统:

响应式系统是能灵敏响应请求的(Responsive),能回复的(Resilient),可伸缩扩展的(Elastic),基于消息驱动的(Message Driven)的系统。

响应式系统的操作流程如下:
png

相应的前端UI更新的过程:

png

响应式编程的好处

  • 状态更新,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 特性。
好处:

  1. Hooks 让函数组件内部有了维护状态的能力
  2. 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 推荐使用组合来进行组件的复用,而不是继承,背后有什么样的考虑?

答疑

代码高聚合、低耦合。目的是使程序模块的可重用性、移植性大大增强。. 通常程序结构中各模块的内聚程度越高,模块间的耦合程度就越低。


声明:
本文大部分来自牛岱老师上课内容

posted @   进击の小白们  阅读(157)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
xxx2745天23小时12分15秒
点击右上角即可分享
微信分享提示