[發明專利]基于React技術構建web應用的方法

在審

• 申請號: 201711090112.0
• 申請日: 2017-11-08
• 公開（公告）號: CN107908398A
• 公開（公告）日: 2018-04-13
• 發明（設計）人: 宿東浩;岳永勝;李波
• 申請（專利權）人: 四川長虹電器股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/30
• 代理公司: 四川省成都市天策商標專利事務所51213
• 代理人: 蔣金梅

1.基于React技術構建web應用的方法，其特征在于，包括以下步驟：

步驟一：將UI界面拆分成組件結構圖

組件結構圖的拆分工作在原型圖或者UI設計圖上進行，采用自頂向下或自底向上的劃分方法，通過繪制各種顏色的線框來框選組件，線框的顏色用來區分不同的組件層級；

步驟二：借助React創建組件，完成不帶交互的靜態頁面

把用線框框出的組件轉換為代碼，采用React框架創建組件，借助React.Component類，為每一個線框創建一個React.Component實例，完成不帶交互的靜態頁面；

步驟三：多次重復步驟一和步驟二之后，將web應用的每一張UI設計圖都轉換為靜態頁面，在這一步中將它們整合起來構成完整的web應用，使用react-router來做前端路由，實現頂層組件之間的切換。

2.根據權利要求1所述的基于React技術構建web應用的方法，其特征在于：所述組件，是指封裝起來的具有獨立功能的UI部件，最小的組件只具有一些單一的功能，可通過簡單組件的組合嵌套，構成復雜的組件。

3.根據權利要求1所述的基于React技術構建web應用的方法，其特征在于：所述組件層級，是指由組件嵌套組合而成的樹形結構，層級中的組件之間存在父子關系，和兄弟關系。

4.根據權利要求1所述的基于React技術構建web應用的方法，其特征在于：在步驟二中，創建React組件時可以采用es6的class方式，或者createReactClass方式來創建一個組件。

5.根據權利要求1或4所述的基于React技術構建web應用的方法，其特征在于：在步驟二中，在由React創建組件的render方法中，設置構成組件區域內容的html片段。

6.根據權利要求1所述的基于React技術構建web應用的方法，其特征在于：在步驟二時，在組件中引入css來調整頁面效果，實現對UI圖的高保真還原。

7.根據權利要求1所述的基于React技術構建web應用的方法，其特征在于：在步驟三中，借助react的生命周期方法和state對象，在組件生命周期中監聽用戶交互事件，建立起應用中各個組件的交互效果。

8.根據權利要求1所述的基于React技術構建web應用的方法，其特征在于，在步驟一之前還包括：使用react官方推薦的腳手架工具create-react-app，創建一個基于react的模板項目，用react-router搭建頁面路由，用于控制頁面級組件的切換；使用redux管理跨組件級的數據，使用react-redux實現數據連接。