基于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或者其他邏輯，但是在每個表單中都會多次出現，將其定義為無狀態組件可以減少不必要的內存浪費。