基于React组件快速构建网站前端

张根　蔡永香　高静文

摘要：为了提高构建网站的效率，减少重复代码的编写。基于面向对象的思想和React自身的特性提出了一套基于React组件模块化建设网站的方法。采用该方法设计构建了React通用组件库，并利用组件库对武汉傲拜尔公司网站进行了快速搭建。结果表明，该文提出的React组件模块化建设网站的方法确实可行。

关键词：React;通用组件;快速构建网站

中图分类号：TP393         文献标识码：A

文章编号：1009-3044（2019）15-0119-03

Abstract： In order to improve the efficiency of building websites and reduce the repetitive code compilation， Based on the object-oriented idea and the characteristics of React， this paper proposes a method of building website based on the modularization of React components， and designs and constructs the generic component library of React， and uses the component library to quickly build the website of Wuhan Aobaier Company. results show that the proposed method of React components modularization is feasible.

Key words： React; general components; quick web construction

1 概述

在当今信息化时代，各企业本着提高知名度、宣传产品信息等各种目的纷纷开始建设自己的网站[1]。这些网站虽然介绍的企业信息不同，展示的产品不一，但是网站组成却是大体相同，前端开发者往往需要针对不同的网站对象编写相似甚至相同的代码。此外，随着HTML5和CSS3的发布与应用，人们接触的网站越来越多，对网页的视觉效果和交互效果要求也越来越高，不再仅仅满足于功能的实现，而是在功能的基础上更多的追求美观和友好的交互效果[1]。因此，前端开发的复杂度也随之增加。网站建设数量的剧增和页面复杂度的增加使得网站前端开发任务变得繁重。降低网站构建成本，提高网站建设效率成为前端研究者普遍思考的问题。文献[2-4]提出网站前端的模块化开发策略，即用模块化设计来思考系统的结构：从系统整体出发，将系统分为通用部分和定制部分，从系统的规划、分解和组合的角度全面考虑系统的协调性、互换性及组合性[5]。前端模块化有利于多人协同开发，既能降低开发人员之间的干扰，又能有效提高网页浏览的速度，减少代码的冗余，整合网络信息资源等[2]。

React是一个用于构建页面UI的库，它以组件化的思想开发网站，即将一个完整的应用看作是一个大的组件，该组件又由不同级别的小组件组合而成;开发者从功能的角度出发，把UI拆分成不同的组件，各组件只负责自己部分的UI和逻辑，彼此相互独立，不同的组件可通过组合或嵌套的方式与其他组件一起使用[6-7]。

React设计组件的过程就是前端页面模块化过程，React组件是更小粒度的页面模块。为了提高网站建设效率，实现网站快速建设，本文提出基于React组件实现前端模块化的方法，并基于该方法实现了傲拜尔公司网站的快速搭建。

2 组件化设计与构建方法

从布局角度看，网站页面一般分为顶部、主体和底部三个部分;从功能角度看，网站页面一般分为控制和展示部分。如果将每个部分拆分为通用（不变）组件和定制（可变）组件进行设计，网站开发时，只需要根据功能需求，将大部分的通用组件直接调用，只对少量定制组件编码，就可以大大减少建站的工作量。要想达到这个目的，组件的设计就需要有非常严格的要求。

面向对象的设计思想就是为提高代码的可重用性和可维护性而提出来的[8，9]。在React组件设计过程中，每一个React组件就可以视为一个对象。按照面向对象的思想进行设计，抽象和封装出通用性强的组件。但是组件的封装又不完全等同于面向对象语言中类的封装，React具有自身特殊性，它采用单向数据流的方式，具体如下：React组件利用props来定义组件的对外接口，用state来表示内部状态;props是组件唯一的数据来源，由父组件向子组件单项传递[10]。

因此，除了按照面向对象的思想抽象和封装组件，设计出高内聚低耦合的组件外，在构建组件的过程中，要遵循React单行数据流的规定。

基于上述思想，为了构建高内聚、低耦合的React高质量组件，结合React的自身特性，本文提出以下三个构建方法：

2.1 利用无状态组件封装页面中的高频元素

React组件分为类组件和函数组件两种类型，类组件是通过类定义的组件，函数组件是通过函数定义的组件，也叫无状态组件。无状态组件中无法使用state来定义状态，也没有生命周期函数，只定义了组件的render方法，在页面中渲染特定的内容。如果页面中元素的布局简单但出现频率很高，使用无状态组件来封装可以减少内存消耗，提高渲染效率。

例如表单中的输入框，如图1所示，包含输入提示文本和input标签。组件的结构很简单，内部也不需要处理state或者其他逻辑，但是在每个表单中都会多次出现，将其定义为无状态組件可以减少不必要的内存浪费。