基于React的Web前端组件化研究与应用

发布时间：2020-09-28 15:24

　　在当今互联网科技飞速发展的背景下,Web前端技术进入了一个新的时代。以组件化为代表的开发方式已逐渐成为前端领域的主流趋势。虽然目前现有的前端组件化技术种类繁多,但组件在获取网络数据和对数据的管理方面都存在着复杂的控制问题。尤其是在构建大规模应用时,由于组件数量的庞大和业务规则的复杂化,加大了前端系统的构建难度。这不仅不利于系统的扩展和迭代,也增加了企业对系统后期的开发和维护成本。本文对前端组件的数据获取及管理复杂化的问题进行了综合分析,并基于React组件技术,制定出一套对组件数据流的管理方案。该方案用于在前端组件化开发中,简化数据获取及管理的复杂度,并提升组件对功能逻辑的调用能力。方案的具体描述可以归纳为以下几点:1.本文利用Fetch网络数据获取技术和Promise异步控制思想,对React组件生命周期模型进行了改进。使组件能够用同步的方式控制异步数据的请求,并增强了组件对数据请求结果的处理能力。2.组件获取数据后,需要根据业务规则进行管理。由于React组件不易于控制复杂的业务逻辑,因此本文设计了一种组件状态数据管理方法。将组件的数据模型与业务逻辑进行分离,从而降低组件间业务的耦合度,并对逻辑调用及数据通信进行有效控制。3.本文以改进的React组件模型为依据,结合组件状态数据管理方法,设计了一种顶层组件容器引擎。该引擎用于装载页面中的所有组件,并提供流程化的形式管理组件数据,使页面更易于拆解和复用。通过使用本文开发设计的顶层组件容器引擎,能够有效控制页面中组件的数据获取和逻辑调用。该引擎在提升前端页面的开发效率的同时,也增强了前端系统的可维护性和可扩展性,降低了后期对页面的扩展及维护成本。
【学位单位】：重庆邮电大学
【学位级别】：硕士
【学位年份】：2018
【中图分类】：TP393.09
【部分图文】：

组件化,使用率,使用者,框架

图 1.1 2017 前端组件化框架使用现状报告报告显示，近年来 React 技术的使用者人数正逐年攀升，从 npm 模块包下看，React 的使用率增长了 500％。其中更加引人注目的是 React 不仅能够应eb 开发，甚至在移动端或是桌面应用程序中都有不俗的表现。这得益于其良

工作原理图,语法

图 2.1 React 工作原理图如图 2.1 所示，展示了 React 在实际开发中的工作原理，主要流程可分为如下几个阶段：首先通过 JSX 语法（JSX 语法是一种 JavaScript 语言的语法糖，属于 JS 的一种

生命周期模型,组件,生命周期,定义组

图 2.2 React 组件生命周期模型图 2.2 所示，展示的是 React 组件生命周期，生命周期的每个阶段都：DefaultProps：该方法主要用于定义组件的默认 Props 值。在创建阶段

【参考文献】