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

说明书

技术领域

本发明的实施方式涉及互联网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来做前端路由，实现顶层组件之间的切换。