本发明的实施方式涉及互联网web应用技术领域，更具体地，本发明的实施方式涉及基于react技术构建web应用的方法。
背景技术：
随着互联网的发展，web页面已经由简单的html+css构成的页面，发展到大型复杂的web应用。随着web应用越来越复杂，相应的开发团队规模也扩大，导致了一些亟待解决的问题：
团队的协同合作，团队人员水平参差不齐。以往的web项目开发，一个项目中可能只需要一两个前端工程师，很多时候沟通约定规则通过口头方式，有的项目甚至只有一个前端工程师，代码风格以自我为中心。随着项目的复杂度提升，这种方式的问题越来越突出，团队中每个人按自己的习惯来写代码，导致一个项目中存在好几种风格的代码。当需要扩展一个原有功能时，需要花大量时间去研习前面的代码。写出的代码越来越难以维护，当需要与其他团队成员来合作，或者一旦出现人员离职，后来的人很难看懂前面人的代码，影响开发进度。对于某个业务需求，每个程序员有自己的方式去实现，导致一旦出现人员变动其他人来接手困难，浪费大量的时间。显著的特点是，沟通成本极速上升，一旦出现人员变动，后续人员接手困难，耗费大量时间，多人协作完成一个模块时，传统方式很难将业务拆分清楚，导致经常会解决代码冲突，降低了效率。
项目的可维护性，随着业务复杂度越来越高，代码量显著增长，大量的代码揉杂在一起，就不得不面对一个问题，出现bug时，很难定位问题点，常常需要在debug中反复调试追踪，维护起来极为困难。功能逐渐增多，管理变得越来越复杂，逻辑变得越来越混乱，给平台维护带来很大挑战。传统非组件方式，天生代码就很容易变得臃肿，各种业务逻辑混淆在一起，处理bug时就会耗用更多的时间来定位问题。
功能的可复用性，传统非组件化模式中，开发人员各自为战，对于出现页面中一个功能点，复制各个页面的开发人员可能会编写多个实现方式。多种方式实现同一个功能，增加了出错的可能性。开发人员再遇到已经实现的功能，一般直接复制已有的源代码，导致大量冗余代码，出错时每个地方都需要修改。
样式的难题，css样式是全局的，多个页面的样式互相干扰，各种无意的类名冲突，选择器冲突导致的样式覆盖。
技术实现要素：
本发明的目的是解决传统非组件方式开发中出现的协作性差，复用性低，可维护性不高的问题。提供一种基于react技术构建web应用的方法，基于react框架，将ui界面拆分成组件层级，位于最底层的组件可能是一些单一功能的聚合，具有高内聚低耦合的特性；组件还具有良好的可组合性，可重用性，和可维护性，可以自底向上通过组件层级的嵌套，构建完整的ui界面。
为了达到上述的技术效果，本发明采取以下技术方案：基于react技术构建web应用的方法，包括以下步骤：
步骤一：将ui界面拆分成组件结构图
组件结构图的拆分工作可以在原型图或者ui设计图上进行，通过绘制各种颜色的框来框选组件区域，组件划分时可以采用自顶向下或自底向上的划分方法，使用线框法，在将划分为组件的区域用不同颜色的线框框起来，线框的颜色用来区分不同层级的组件。例如一个常见的管理系统页面，包括顶部导航菜单，左侧统计信息面板，右侧详细数据展示。首先整个页面是一个大的组件，在这个组件下面，页面中的导航菜单区域可以划分为一个组件，左侧统计面板可以划分为一个组件，右侧详情内容也可以划分成一个组件。该步骤非常重要，主要在于理清界面的组件划分思路，合理的拆分组件层级关系。
步骤二：借助react创建组件，完成不带交互的静态页面
把用线框框出的组件转换为代码，采用react框架创建组件，借助react.component类，甚至可以将整个页面创建为一个很庞大的组件。按照ui设计图中划分的组件结构，为每一个线框创建一个react.component实例，完成不带交互的静态页面；
步骤三：上一步完成了单张ui设计图的静态界面，而对于一个web应用来说，肯定不会只有一个界面，多次重复步骤一和步骤二之后，将web应用的每一张ui设计图都转换为静态页面，在这一步中将它们整合起来构成完整的web应用，使用react-router来做前端路由，实现顶层组件之间的切换。
本发明基于react框架，react框架是由facebook发布并维护的一套专门用于构建web视图的开源的javascript框架。其独特之处在于引入了jsx语法和虚拟dom技术，jsx语法体现了view＝f(state)的思想，在javascript中生成html，将js和html融合在一起。当页面内容将要发生变化时，虚拟dom首先更新，然后和实际的dom对比，只更新不同的部分，解决了传统dom操作耗时高的问题。
进一步的技术方案是：所述组件，是指封装起来的具有独立功能的ui部件，最小的组件只具有一些单一的功能，可通过简单组件的组合嵌套，构成复杂的组件。
进一步的技术方案是：所述组件层级，是指由组件嵌套组合而成的树形结构，层级中的组件之间存在父子关系和兄弟关系。
进一步的技术方案是：在步骤二中，创建react组件时可以采用es6的class方式，或者createreactclass方式来创建一个组件。
进一步的技术方案是：在步骤二中，在由react创建组件的render方法中，设置构成组件区域内容的html片段。
进一步的技术方案是：在步骤二时，在组件中引入css来调整页面效果，实现对ui图的高保真还原。
进一步的技术方案是：在步骤三中，借助react的生命周期方法和state对象，在组件生命周期中监听用户交互事件(鼠标，键盘，屏幕触摸)，建立起应用中各个组件的交互效果。
进一步的技术方案是：在步骤一之前还包括：使用react官方推荐的脚手架工具create-react-app，创建一个基于react的模板项目，用react-router搭建页面路由，用于控制页面级组件的切换；使用redux管理跨组件级的数据，使用react-redux实现数据连接。
本发明与现有技术相比，具有以下的有益效果：基于react技术组件化构建web应用的方法，通过将页面结构拆分成可复用组件，结合优秀的react开源框架技术，解决web开发过程中，代码复用率低，可维护性差的的难题，具有良好的可组合性，可重用性，和可维护性，可以自底向上通过组件层级的嵌套，构建完整的ui界面。
附图说明
图1示出了本发明实施例的整体架构图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
实施例
基于react技术构建web应用的方法，包括以下步骤：
a、使用react官方推荐的脚手架工具create-react-app，创建一个基于react的模板项目，用react-router搭建页面路由，用于控制页面级组件的切换。使用redux管理跨组件级的数据，使用react-redux实现数据连接。
b、将ui界面拆分成组件结构图，如图1所示，前端开发工程师拿到任意ui界面原型图时，在ui图上画一些方框来包括每个组件和它们的子组件。组件划分时可以通过判断是否应该为ui图中某一块创建新的功能对象，来决定是否划分组件，或按照单一职责原则来划分。
c、借助react创建组件，完成不带交互的静态页面。当在ui图上用方框确认了页面的组件结构，需要将图上定义的组件结构转换为代码。借助于react框架，可以帮助实现定义的组件结构。最外层组件(根组件)包含了下面所有的后代组件，构成完整的ui界面。
d、设置控制组件的显示效果的状态数据。在一个web应用中，一般只有一个根组件，而web应用有多个不同页面。为了一个根组件中展示不同的页面，可以将应用中的每个页面看成根组件的子组件，根组件通过自身保存的状态决定显示哪一个页面组件。在应用根组件中，可以包括一个菜单子组件，通过点击菜单项，设置根组件的状态，从而切换显示的页面。
尽管这里参照本发明的解释性实施例对本发明进行了描述，但是，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。更具体地说，在本申请公开的范围内，可以对主题组合布局的组成部件和/或布局进行多种变型和改进。除了对组成部件和/或布局进行的变型和改进外，对于本领域技术人员来说，其他的用途也将是明显的。