用友iUAP马太航：React开发实战技巧

ZD至顶网CIO与应用频道 10月26日 评论消息：React是Facebook在2013年发布的一个前端框架，而如今的React俨然已经演变成一个前端生态，这个生态圈包含了众多基于 React的框架：React JS、React Canvas、React Native for iOS、React Native for Android。由于Facebook的大力支持和众多开发者的追捧，React在前端框架中备受青睐。

React的API非常简单，然而React的思想却比较独特，如：组件化开发、单向数据流、虚拟DOM，能准确理解React的思想并使用其完成开发并不容易，现从四个维度总结React开发中一些符合其思想的开发技巧：组件封装、数据流、事件系统和JSX。

组件封装

React通过自定义标签的方式来实现组件化，组件是React的基础，React通过组件来构建虚拟DOM、并对数据流做控制。React组 件的结构类似于HTML标签，并支持使用所有常用的HTML标签和SVG标签，标签支持的属性包括HTML标准属性、SVG标准属性和所有的 data-*、aria-*属性。

组件的封装能更好发挥React的性能优势和提升开发效率，封装React组件时应当遵循三个原则：高复用性原则、少组件原则和大组件原则。高 复用性原则要求对项目中所有Web页面的结构有清晰的把握，能够准确提取样式或功能雷同的模块并将其封装成组件;少组件原则是指当深层次的成员无需组件化 时，可以直接将外层的父元素组件化以减少组件的数量，少组件原则是基于开发效率的考虑;大组件原则是指应当更多地将零散组件拼装成更大的组件，这样可以简 化组件的调用，在团队开发中能明显提升开发效率。

数据流

React的数据模型分为共有数据和私有数据，共有数据可以在组件间进行传递，私有数据为当前组件私有。共有数据在React中使用props 对象来调用，它包含标签所有的属性名称和属性值，props对象有三个特性，单向流动性、显示传递性和只读性。单向流动性是指React的数据只能由父组 件传递到子组件，而不能由子组件传递到父组件;显示传递性是指必须明确地在子组件中通过属性赋值，数据才可以传递到子组件;只读性是指props数据是只 读的，数据修改后并未改变原始的数据模型，而是会新生成一份数据模型，并将新的数据模型加载到原始父元素，从而完成数据的传递和组件状态的更改。私有数据 为组件私有，在React使用state对象来调用，state数据模型可以方便地进行更新操作，并且不会影响到其他组件。

基于React数据模型的特点，在使用React时可以根据数据的更新频率将数据分为固定数据(更新频率较低的数据)和动态数据(更新频率较高 的数据)两类，固定数据使用props对象存储，动态数据使用state对象来存储。对数据切分时，props的优先级要高于state，这样可以尽可能 地保证组件的无状态化，从而简化组件的交互逻辑。

事件系统

React中的事件可以分为三类：React合成事件、生命周期事件和其他平台事件。

React合成事件：合成事件机制，是对原生HTML事件进行的封装，支持绝大部分HTML事件并且跨浏览器支持。React合成事件机制的使用类似于原生HTML事件，需要将事件显示地注册于组件的标签上。

生命周期事件：React组件有生命周期的概念，React使用虚拟DOM来管理组件，在内存中完成组件的创建、状态更新、移除等操作，然后将 结果渲染到DOM;React组件的生命周期可以分为4个过程：初始化、挂载、更新、销毁，每个过程都有一个或多个事件回调，并以回调函数的方式来完成用 户自定义操作。

其他平台事件：包括Window事件和其他插件的事件(如JQuery事件)，这些事件可以在React组件内部注册并与React组件进行通讯，为保持组件的封装特性，其他平台事件使用时应当与组件生命周期事件的回调函数相结合以实现在React组件内部注册事件。

使用JSX

JSX是一种语法糖工具，它允许使用标签化的语言来完成组件和变量的定义。JSX并不是使用React所必须的，可以用原生JavaScript完成React的所有操作。

由于JSX使用了标签化的语言，相比于JavaScript，它能够精确地表达出树的结构，让代码变得简单易懂，还能够更明确地表达出属性和数据的传递过程。使用JSX对开发效率的代码的可读性的提升是很明显的，尤其是在团队开发的过程中。

React用具有革命性的创新解决了诸多前端开发的痛点，为更好的发挥React开发的优势，开发过程应当熟练把握React的设计思想，并始终坚持三点原则：快速开发、高效运行、易于维护。