一、基于React的生产流转卡系统前端设计与实现
- 国内外研究现状
React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
随着网络技术的快速发展与普及，前端应用的规模变得越来越大， 用户与网页的交互也变得越来越复杂。Facebook 的 React Native 通过JS引聚将JS编写的组件与模块映射成原生的组件与模块。摆脱了基于 WebView的性能瓶颈，基本能够达到原生程序的性能体验。并且 Reae Native 既保有Web 的开发优势，也能方便与原生进行混合开发，解决了多平台开发的效率问题与稳定性的问题，然而
React Native的设计理念仍然局限在原生开发的模式上，虽然把 Web 的开发方式引入了进来，却以
整个业务的形式打包应用，没有充分利用Web页面化的优势。在这一层面上，国内的 Weex 框架针对这一问题做了一定的优化，把业务以嵌入式网页的形式嵌入到原生应用中，每个页面都通过服务器分发下来，既能实现动态更新，又能接近原生程序的性能体验。但由于 Weex 的嵌入式网页的设计理念，使得其对设备硬件的支持与稳定性相对减溺了不少，难以适用于移动金融对设备硬件的应用场景。随着移动互联网的高速发展，应用的稳定性和性能体验与开发人员的开发效率显然构成了不可调和的矛盾。由于移动终端设备的不断升级和迭代，性能成倍的提升，使得用一种语言来实现多个平台的开发的解决方案成为了可能，随着研究课题的不断推进，跨平台的兼容性和稳定性得到了改善，系统性能也能够达到了实际应用的要求。在移动互联网广大的应用场景下，跨平台的解决方案日益成熟，目前已经在大大小小的应用中保用与实践。并且 Reac Naive和 Weex这类的技术方案在大部分场景下已经接近于原生平台的体验了。
react-native 开源后的这段时间,有不少开发者尝试去通过实现这样的一个工具去管理和维护自己开发团队的组件。在github开源的 deco-ide 工具，该工具通过集codemirror插件来实现代码编辑，语法高亮，文本插入等功能，同时提供列表去浏览deco 公司所封装维护的组件，开发人员可以通过拖拽列表中的组件，并在代码编辑区域拽入，即能插入对应组件的代码模版，实现了一定程度的代码生成。但是，deco-ide软件作为一款ide, 它提供的组件十分有限，并且对于自定义组件如何上传跟管理并没有文档进行介绍，其次，该ide虽然为采用 react-native框架的 app开发所服务，但是并没有提供手机界面设计的功能。Intellij公司的 webstorm编辑器，支持对react-native框架的代码编辑和语法高亮等功能，但在原型界面设计上仍然缺少支持。在app开发中，如果采用模拟器或者手机去查看app界面，对于工作机的cpu会造成压力，同时影响开发效率。同样，微软公司开源的vscode 编辑器，支持react-native的语法检测等功能，但相比于界面设计，基于react-native 的组件管理，该款编辑器更注重轻量化，性能方面。目前，在组件管理和维护一块和辅助布局设计上，并没有了解到针对react-native框架在以上方面支持比较完备的开源ide或者原型工具。
- 研究主要成果
React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素，也可以传递动态变量，甚至是可交互的应用组件。React有四个核心概念：虚拟DOM、组件化、JSX语法、单向 数据流。React提供了一种新的前端开发的思路,并且伴随有成熟的第三方技术库来辅助项目搭建。Web开发的过程就是一个将实时数据不断更新至用户界面的过程，这时就要对DOM进行操作,而复杂和频繁的DOM操作实际上又是 性能瓶颈产生的重要原因。为此React引入了一种虚拟DOM（Virtual DOM）的机制：在浏览器端用JavaScript实现了一套DOM API。基于React进行开发的所有的DOM构造都是通过虚拟DOM进行的。每当 数据更新时，React都会重新构建一棵虚拟DOM树，然后将当前的DOM树与新构建的DOM树进行对比，得到差异节点，再进行浏览器端的局部真实DOM更新。因为虚拟DOM是内存数据，性能是极高的，而对真实操作的DOM那一部分，只是差异点所在的局部区域，因此能极大地提高性能。虚拟DOM能够提供更为简明高效的UI开发逻辑，同时也带来了组件化的开发思想。React的思想就是将界面的构成拆分为组件，组件如何拆分取决于其功能上的差异，这需要开发人员自己去根据实际来设计，而完整的UI界面的形成就是通过这些小的组件的相互拼装与嵌套。每个组件只关心自己部分的逻辑，彼此独立，外层的界面的渲染只需要引入这个组件，这种方式下每个组件的UI和逻辑都定义在组件内部，与外部完全通过API来交互，实现复杂的功能就通过自由组合，React当中，组件一般具有可组合,可重用,可维护,可测试四个特点。除却核心的React核心框架，实际项目开发当中我们还需要依赖诸多开源的第三方库，比如Antd-mobile库,React-router-dom库,Redux库等，功能涵盖但不限于界面风格,路由技术,状态管理技术。
React 凭借其独特的设计思路和出众的性能，得到了 广大开发者的青睐，以成为当今 Web 前端开发的一款主流框架。React卓越的设计思想主要体现在以下三个方面：
（1）专注视图层。React 并不是完整的 MVC/MVVM 框架，它专 注于提供清晰，简洁的 View（视图）层解决方案，同时也是包含有视 觉（View）和控制器（Controller）的库。对于业务逻辑较为复杂的系 统，开发者可以根据实际情况自行选择业务逻辑框架，并根据需求搭 配 Flux，Redux，GraphQL/Relay 来使用。
（2）高效渲染。React 的开发者为其引入了虚拟 DOM（Virtual DOM）机制，当前端组件需要更新的时候，React 会创建一个新的虚 拟 DOM 并与之前储存的 DOM 通过 diff 算法进行比较，仅对需要改 变的 DOM 进行修改和加载，大大减少了加载量和加载时间。同时帮 助解决了跨浏览器问题，标准化的 API，能兼容新版本的浏览器，方 便和其他平台集成。
以上是毕业论文文献综述，课题毕业论文、任务书、外文翻译、程序设计、图纸设计等资料可联系客服协助查找。
