[发明专利]基于React技术构建web应用的方法

权利要求书

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实现数据连接。