现代前端架构介绍(第三部分):深入了解状态管理层及其对前端App的影响

远离JavaScript疲劳和框架大战,了解真正重要的东西

在第二部分中,我们讨论了功能架构的三个层次。其中一个就是状态管理层,今天我们将对其进行更深入的探讨。下面是现代前端架构系列的第三部分和最后一部分介绍。

状态管理,你可能看不到它,但它确实存在…

我们假设有一个购物应用,其中包含一系列产品列表。当用户选择一个产品时,其详细信息(价格、产地等)将被显示。对于大多数用户来说,这可能只是单击一个按钮的动作,但对于前端开发人员来说,应用的状态已经发生了变化。这意味着什么呢?

让我们一步步回顾一下事情的经过:

  • 用户执行了点击操作来选择产品。
  • 该应用程序通过获取产品详细信息来响应该事件。
  • 用户界面被更新以反映产品详细信息的新价值。

因此,每当发生事件时,该应用程序会更新其值并显示变化。

那么什么是状态?

在任何给定的时间点上,应用程序所持有的属性或变量的值。(来源:Quora)

那么什么是状态管理呢?

在应用程序中添加、更新、删除和读取状态的概念

好的,它如何影响前端架构?

前端应用程序被设想为执行功能并向用户界面(UI)发送事件,以将当前状态更改为另一种状态。

组件与状态交互

为了正确地渲染组件,通常需要提供输入,这些输入通常由状态提供。这意味着状态的任何变化都会更新输入,因此应该触发变化检测以刷新视图。

所以问题在于,如何改变状态呢?

我们通过探索 Redux 模式(目前是前端状态管理的事实上的标准)来回答这个问题。

当应用程序中发生事件(点击、拖动、HTTP调用等)时,它会被转换为一个动作,并被分发到状态管理领域。到达后,它将由称为“还原器”的函数处理。还原器是纯函数,负责使用传入的操作和当前状态创建新的状态。新的状态将替换当前状态,并且组件的输入将根据新的值进行更新。

在回家的

纯函数意味着对于相同的输入,它总是会返回相同的输出。这使得副作用(可能会导致结果不可预测)没有存在的空间。例如,两个值的总和总是相同的(1+1=2),但是由于各种原因(网络问题、无效请求、授权问题等),同一个网络请求的结果可能成功也可能不成功。

那么如何在 Redux 中处理副作用呢?

深入学习 Redux

与前面描述的完全相同,只是触发任务产生副作用的操作不会被还原器处理,而是由 Redux 的另一个部分处理。副作用处理程序执行不纯任务,然后将结果作为没有副作用的 action 重新引入。例如,当“获取产品详细信息” action 被发送时,副作用块将发出一个 HTTP 请求以获取结果。一旦请求完成(成功或失败),一个新的 action 将描述最终结果(Fetch product details success 或 Fetch product details failed),并发送给还原器。

状态管理模块在 Redux 中被称为 Store。它负责分发动作、包含 reducer 并存储当前状态。Redux 模式强制执行单向数据流,使 App 具有可预测性和一致性。只有通过动作,App 的状态才能发生变化,而这种变化将在 UI 中得到反映。

这些变化会如何影响我们的代码结构呢?

<span style="background-color:#f2f2f2"><span style="color:#242424">AppRepo│ ├──/Overview <strong>|</strong> ├──/Components <strong>|</strong>    ├──/ListComponent │    └──/ChartComponent <strong>|</strong> ├──/State<strong>|</strong>   ├──overview.state.ts          * our feature state file<strong>|</strong>   ├──overview.actions.ts        * our feature actions file<strong>|</strong>   ├──overview.reducers.ts       * our feature reducers file</span></span>

与对组件所采取的相同方法一样,我们决定创建一个文件夹来存放属于状态管理层的每个元素:

  • 特点。状态:特征状态的定义
  • 特点。动作:属于业务领域特征的操作
  • 特点。归约器:具有必要逻辑以更新特征状态的功能

解释软件架构并不是一件容易的事。

我尝试采用一种“由外而内(自上而下)”的方法,在第一部分《App是如何由不同的构建块构成的》一文中,我详细介绍了现代前端架构中的App是如何由不同的构建块构成的。随后,在第二部分《如何将功能架构分为三层》一文中,我指出现代前端架构中的功能架构是如何被分为三个由关注点分离的层的。最后,我在第三部分《深入了解状态管理层及其对前端App的影响》一文中,探讨了状态管理层的内部结构及其对前端App的影响。

在前端架构方面,比如单体仓库、微前端架构或者如何让功能域保持良好的分离但又易于理解,仍然存在更多的挑战。但在我看来,这一切都始于理解前端应用程序的性质及其需求。

 欢迎关注公众号:清晰编程,获取更多精彩内容

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/389822.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全球轻型汽车市场规划预测:2030年市场规模将接近2502亿元,未来六年CAGR为2.8%

一、引言 随着全球经济的发展和消费者出行需求的增加&#xff0c;轻型汽车作为汽车市场中的重要组成部分&#xff0c;其市场重要性日益凸显。本文旨在探索轻型汽车行业的发展趋势、潜在商机及其未来展望。 二、市场趋势 全球轻型汽车市场的增长主要受全球经济发展、消费者对出…

MySQL基础练习题19-查找拥有有效邮箱的用户

题目&#xff1a;查找具有有效电子邮件的用户 准备数据 分析数据 总结 题目&#xff1a;查找具有有效电子邮件的用户 一个有效的电子邮件具有前缀名称和域&#xff0c;其中&#xff1a; 前缀 名称是一个字符串&#xff0c;可以包含字母&#xff08;大写或小写&#xff09;&…

QtQuick Text-对齐方式

属性 Text项目 的horizontalAlignment和verticalAlignment分别用来设置文本在 Text项目区域中的水平、垂直对齐方式。 默认文本在左上方。 属性值有&#xff1a; horizontalAlignment Text.AlignLeftText.AlignRightText.AlignHCenterText.Justify verticalAlignment Text.…

js 前端 解析excel文件【.xlsx文件】信息内容

需求&#xff1a; 从excel文件中解析里面的内容 1、使用插件xlsx.full.min.js&#xff0c;地址&#xff1a;https://unpkg.com/xlsx/dist/xlsx.full.min.js实例&#xff1a; <script src"https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script><i…

关于inet_addr()中的参数不能是 sring类型的 只能是 string类型变量.c_str()

源码展示&#xff1a; extern in_addr_t inet_addr (const char *__cp) __THROW inet_addr中的参数是const char *类型的 定义一个string 类型的ip 使用这个inet_addr()接口 local.sin_addr.s_addr inet_addr(ip_.c_str()); local.sin_addr.s_addr inet_addr(&ip_);…

(超全)Kubernetes 的核心组件解析

引言 在现代软件开发和运维的世界中&#xff0c;容器化技术已经成为一种标志性的解决方案&#xff0c;它为应用的构建、部署和管理提供了前所未有的灵活性和效率。然而&#xff0c;随着应用规模的扩大和复杂性的增加&#xff0c;单纯依靠容器本身来管理这些应用和服务已不再足够…

零基础入门转录组数据分析——机器学习算法之SVM-RFE(筛选特征基因)

零基础入门转录组数据分析——机器学习算法之SVM-RFE&#xff08;筛选特征基因&#xff09; 目录 零基础入门转录组数据分析——机器学习算法之SVM-RFE&#xff08;筛选特征基因&#xff09;1. SVM-RFE基础知识2. SVM-RFE&#xff08;Rstudio&#xff09;——代码实操2. 1 数据…

VS Code C/C++ MSVC编译器

官方教程 通过快捷方式打开VS Code是编译不了的,需要对tasks.json修改(Tasks: Configure default build task) 先创建tasks.json 复制这段配置到tasks.json,记得修改VsDevCmd.bat的路径 {"version": "2.0.0","windows": {"options"…

Gradle 统一管理依赖

BOM 介绍 BOM 是 Bill of Material 的简写&#xff0c;表示物料清单。BOM 使我们在使用 Maven 或 Gradle 构建项目时对于依赖版本的统一变得更加规范&#xff0c;升级依赖版本更容易。 比如我们使用 SpringBoot 和 SpringCloud 做项目时&#xff0c;可以使用他们发布的 BOM …

ARM 离线安装k8s + harbor私有镜像库(麒麟)

目录 1.1 K8S 服务集群安装部署 1.1.1 主机配置说明 1.1.2 主机名称、host配置 1.1.3 防火墙配置 1.1.4 关闭selinux 1.1.5 配置内核转发及网桥过滤 1.1.6 关闭SWAP分区 1.1.7 安装ipset及ipvsadm 1.1.8 时间同步(麒麟系统自带了chronyd) 1.1.9 docker安装 1.1.10 …

用户画像系列——Spark任务调优实践

在画像标签的加工和写入hbase中&#xff0c;我们采用了spark来快速进行处理和写入。但是在实际线上运行的过程中&#xff0c;仍然遇到了不少问题&#xff0c;下面来总结下遇到的一些问题 1.数据倾斜问题 其实spark 数据倾斜思路和hive、mapreduce 数据倾斜思路处理类似&…

ELK对业务日志进行收集

ELK对业务日志进行收集 下载httpd 进到文件设置收集httpd的文件进行 设置 编辑内容 用于收集日志的内容 将日志的内容发送到实例当中 input {file{path > /etc/httpd/logs/access_logtype > "access"start_position > "beginning"}file{path &g…

基于SpringCloud alibaba的流媒体视频点播平台

基于SpringCloud alibaba的流媒体视频点播平台 前言整体架构具体实现视频播放 总结 先把项目地址放这 》基于SpringCloud alibaba的流媒体视频点播平台《 然后咱们来看看这个项目是干啥的。 前言 今天和大家分享一个项目&#xff0c;基于SpringCloud alibaba的流媒体视频点…

嵌入式单片机中在线调试工具使用方法

大家好,相信很多小伙伴都听说过,或者用过SystemView这款工具。 它是一个可以在线调试嵌入式系统的工具,它可以分析RTOS有哪些中断、任务执行了,以及这些中断、任务执行的先后关系。 还可以查看一些内核对象持有和释放的时间点,比如信号量、互斥量、事件、消息队列等,这在…

紫辉创投开启Destiny of Gods首轮投资,伯乐与千里马的故事仍在继续

近日&#xff0c;上海紫辉创业投资有限公司&#xff08;以下简称“紫辉创投”&#xff09;宣布开启GameFi链游聚合平台Destiny of Gods首轮投资500,000美金&#xff0c;并与其达成全面战略及业务层合作&#xff0c;双方将协同布局链上生态&#xff0c;共同推动链游行业健康发展…

开发板与ubuntu不能ping通怎么办?

TOC 第一步&#xff1a;VMware 设置 打开 VMware Workstation Pro 里的 虚拟机 -> 设置 设置网络适配器为桥接模式。这里不要勾选“复制物理网络连接状态”。 因为电脑是 WiFi 上网&#xff0c;所以需要添加一个网络适配器并设置成 NAT 模式&#xff0c;供虚拟机上网。具…

C#:枚举及位标志周边知识详解(小白入门)

文章目录 枚举为什么要有枚举?枚举的性质设置默认类型和显式设置成员的值 位标志(重要)位标记是什么及作用位标志周边知识HasFlag判断是否有该功能枚举前面加Flags的好处 关于枚举的更多知识using static简化代码获取枚举成员的字面量 枚举 为什么要有枚举? 为了增加代码的…

ComfyUI 实战教程:一键扩图

大家好&#xff0c;我是每天分享AI应用的萤火君&#xff01; 本文给大家分享一个很有用的技术&#xff1a;AI扩图。所谓扩图就是扩展图像的边界&#xff0c;在图像的边界外新增更多画面元素&#xff0c;这不仅仅是扩大图像的尺寸&#xff0c;还要让新添加的部分与原有图像的内…

xss漏洞(二,xss入靶场搭建以及简单利用)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 一&#xff0c;环境搭建。 使用工具&#xff1a;PHP study&#xff0c;dvwa靶场。 1&#xff0c;GitHub上下载dvwa到PHP study的WWW文件夹内&#xff0c;并解压。 dvwa下载地址 …

区块链核心概念与技术架构简介

引言 区块链&#xff0c;一种分布式账本技术&#xff0c;不仅为数字货币提供了基础设施&#xff0c;更在金融、供应链、物联网等多个领域展现出广泛的应用前景。区块链技术被认为是继蒸汽机、电力、互联网之后&#xff0c;下一代颠覆性的核心技术。 如果说蒸汽机释放了人们的…