基于React組件快速構(gòu)建網(wǎng)站前端

張根　蔡永香　高靜文

摘要：為了提高構(gòu)建網(wǎng)站的效率，減少重復代碼的編寫?；诿嫦?qū)ο蟮乃枷牒蚏eact自身的特性提出了一套基于React組件模塊化建設網(wǎng)站的方法。采用該方法設計構(gòu)建了React通用組件庫，并利用組件庫對武漢傲拜爾公司網(wǎng)站進行了快速搭建。結(jié)果表明，該文提出的React組件模塊化建設網(wǎng)站的方法確實可行。

關(guān)鍵詞：React;通用組件;快速構(gòu)建網(wǎng)站

中圖分類號：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 概述

在當今信息化時代，各企業(yè)本著提高知名度、宣傳產(chǎn)品信息等各種目的紛紛開始建設自己的網(wǎng)站[1]。這些網(wǎng)站雖然介紹的企業(yè)信息不同，展示的產(chǎn)品不一，但是網(wǎng)站組成卻是大體相同，前端開發(fā)者往往需要針對不同的網(wǎng)站對象編寫相似甚至相同的代碼。此外，隨著HTML5和CSS3的發(fā)布與應用，人們接觸的網(wǎng)站越來越多，對網(wǎng)頁的視覺效果和交互效果要求也越來越高，不再僅僅滿足于功能的實現(xiàn)，而是在功能的基礎上更多的追求美觀和友好的交互效果[1]。因此，前端開發(fā)的復雜度也隨之增加。網(wǎng)站建設數(shù)量的劇增和頁面復雜度的增加使得網(wǎng)站前端開發(fā)任務變得繁重。降低網(wǎng)站構(gòu)建成本，提高網(wǎng)站建設效率成為前端研究者普遍思考的問題。文獻[2-4]提出網(wǎng)站前端的模塊化開發(fā)策略，即用模塊化設計來思考系統(tǒng)的結(jié)構(gòu)：從系統(tǒng)整體出發(fā)，將系統(tǒng)分為通用部分和定制部分，從系統(tǒng)的規(guī)劃、分解和組合的角度全面考慮系統(tǒng)的協(xié)調(diào)性、互換性及組合性[5]。前端模塊化有利于多人協(xié)同開發(fā)，既能降低開發(fā)人員之間的干擾，又能有效提高網(wǎng)頁瀏覽的速度，減少代碼的冗余，整合網(wǎng)絡信息資源等[2]。

React是一個用于構(gòu)建頁面UI的庫，它以組件化的思想開發(fā)網(wǎng)站，即將一個完整的應用看作是一個大的組件，該組件又由不同級別的小組件組合而成;開發(fā)者從功能的角度出發(fā)，把UI拆分成不同的組件，各組件只負責自己部分的UI和邏輯，彼此相互獨立，不同的組件可通過組合或嵌套的方式與其他組件一起使用[6-7]。

React設計組件的過程就是前端頁面模塊化過程，React組件是更小粒度的頁面模塊。為了提高網(wǎng)站建設效率，實現(xiàn)網(wǎng)站快速建設，本文提出基于React組件實現(xiàn)前端模塊化的方法，并基于該方法實現(xiàn)了傲拜爾公司網(wǎng)站的快速搭建。

2 組件化設計與構(gòu)建方法

從布局角度看，網(wǎng)站頁面一般分為頂部、主體和底部三個部分;從功能角度看，網(wǎng)站頁面一般分為控制和展示部分。如果將每個部分拆分為通用（不變）組件和定制（可變）組件進行設計，網(wǎng)站開發(fā)時，只需要根據(jù)功能需求，將大部分的通用組件直接調(diào)用，只對少量定制組件編碼，就可以大大減少建站的工作量。要想達到這個目的，組件的設計就需要有非常嚴格的要求。

面向?qū)ο蟮脑O計思想就是為提高代碼的可重用性和可維護性而提出來的[8，9]。在React組件設計過程中，每一個React組件就可以視為一個對象。按照面向?qū)ο蟮乃枷脒M行設計，抽象和封裝出通用性強的組件。但是組件的封裝又不完全等同于面向?qū)ο笳Z言中類的封裝，React具有自身特殊性，它采用單向數(shù)據(jù)流的方式，具體如下：React組件利用props來定義組件的對外接口，用state來表示內(nèi)部狀態(tài);props是組件唯一的數(shù)據(jù)來源，由父組件向子組件單項傳遞[10]。

因此，除了按照面向?qū)ο蟮乃枷氤橄蠛头庋b組件，設計出高內(nèi)聚低耦合的組件外，在構(gòu)建組件的過程中，要遵循React單行數(shù)據(jù)流的規(guī)定。

基于上述思想，為了構(gòu)建高內(nèi)聚、低耦合的React高質(zhì)量組件，結(jié)合React的自身特性，本文提出以下三個構(gòu)建方法：

2.1 利用無狀態(tài)組件封裝頁面中的高頻元素

React組件分為類組件和函數(shù)組件兩種類型，類組件是通過類定義的組件，函數(shù)組件是通過函數(shù)定義的組件，也叫無狀態(tài)組件。無狀態(tài)組件中無法使用state來定義狀態(tài)，也沒有生命周期函數(shù)，只定義了組件的render方法，在頁面中渲染特定的內(nèi)容。如果頁面中元素的布局簡單但出現(xiàn)頻率很高，使用無狀態(tài)組件來封裝可以減少內(nèi)存消耗，提高渲染效率。

例如表單中的輸入框，如圖1所示，包含輸入提示文本和input標簽。組件的結(jié)構(gòu)很簡單，內(nèi)部也不需要處理state或者其他邏輯，但是在每個表單中都會多次出現(xiàn)，將其定義為無狀態(tài)組件可以減少不必要的內(nèi)存浪費。