在2014年八月的时候，为了能够更新用户的学习体验，故而决定采用React.js库，这可是一个专门用来编写UI的类库。在起始阶段，我们所面临的问题是，特别难以寻觅到React在复杂应用当中应用的示例，就比如像这般复杂的应用。原因在于，大多数的教程都是着重于小型示例应用之上的种种特性，而并非是针对在开发大型应用期间更为常见的那些问题。在本文里面，我不但会针对React的使用展开一番概述，而且还会专门去说明在大型web应用程序里使用React时的某些特定注意事项。

React是什么？

简单来讲，React是个用于创建用户界面的代码库，跟编写用户界面常见的方式不一样，React把每个UI元素当作一个抑制的状态机，它并非像类似这样的“框架”，虽说有时会把React描述成“MVC里的V”，但我感觉到这一描述没什么用处，原因是React应用不需要遵循MVC模型，React能帮你创建速度快的用户界面，处理复杂的交互，而用不着编写大量质量差的代码。

如果你打算在工作中使用React，你需要了解以下特性：

“React会为你处理DOM”

进行DOM操作，其开销是非常大的。React具有不小的吸引力，在很大程度上，这源自于它针对这一问题采取的处理方式。React借助对自身虚拟DOM的维护，仅在有需要的时候才开展重新渲染，把DOM操作的数量降低到了最低限度，这得归功于在React里实现的高性能的比较操作。

这便意味着，在极少的一些情况下，你才会直接去和DOM进行交互，恰恰相反的是，React会为你去处理DOM的相关操作。这一特性同样也是许多React设计得以构建的基石。要是你蓄意过度使用React的API，又或是妄图依照你自己的方式去实施改动，那么极有可能对React对于DOM的理解产生影响。

使用Node.js进行内置的服务端渲染因这一特性才成为可能，而这就使得你能够轻松创建出对SEO友好的页面，是这样的情况。

“React使用声明式风格以及组件”

在React里，各个组件均得继承自类，组件中存有属性，此由父类去决定，组件还有状态，其能够自行发生改变，一般是依据用户行为来实现改变，组件的渲染以及行径应当全然由其状态还有属性来决定，即不依赖于任何别的值，于是组件就是状态机，这一模型鼓动使用者去创建模块化的UI，而且在实践当中能够让UI的操作与创建工作得以简化。

“React将标记紧密地结合在中”

说来奇怪，在中编写HTML代码，不过于React而言情况有所不同，它是一种自然的行径。JSX是原生的JS与HTML所标记缔结合而为一的语言，对其运用并非强制，但我强烈提议你择此而行。React觉得，鉴于你的标记已然与控制这些标记的紧密相连，因而把它们置于同一文件是可行的，对此我深表赞同。

“单向信息流动”

这一点，更多的是属于一种通用的React模式，并非是一种严格的规则。在React里，信息的流动趋向于单向流动。于本文稍后的部分当中，当我们着手开始考虑在大型应用程序里怎样去处理信息流动时，还会再次说起这一模式。

解析React应用程序

为了将这些原则彰显得更加明了，来瞧瞧学习环境借助React是怎样予以构建的。

学习环境

对于该屏幕截图所展示的内容而言，主要学习环境源于多个各异的UI元素构成，其中一些元素会始终呈现于页面之上，像menu等，然而部分组件会依据当前练习的差异，处于显示或者不显示的情形下，假设按照课程的区别，web浏览器、命令行以及代码编辑器有可能出现混合或者匹配的状况。

创建该界面的逻辑解决办法是，针对各个部分去创建React组件，把这件事完成这样一个操作。在下面所呈现的屏幕截图当中，我会专门针对此事，为你特别指出其中主要的React组件，以此来给你说明清楚这件事。

学习环境以及对应的组件

任意每个构件都存在着具备包含多个子构件的可能性，比如说，处于屏幕左方位置的面板事实上是涵盖了多个构件的。

组成组件的各个子组件

于这个示例之内，我们会借助React去判定哪些组件应当于该面板里予以显示，比如：

只有在用户已登录的前提下，才会显示“ a ”按钮

只有在该练习中包括测试的情况下，才会显示部分

另外，React会对该组件跟其它组件之间的信息流动予以处理。整个学习环境对应着一个父组件，这个组件会持续跟踪多个状态，像是当前用户处于哪一个练习当中。父组件会针对子组件的属性做相应的赋值，以此来决定这些子组件怎样显示。

现下，使我们去瞧一个组件通信的实例，以下这些组件来源于有着大量简化情况发生后的组件树构造：

与代码提交相关的某些组件

要是有个用户盘算着去运行他自己写的代码，那对于这一工作流程而言，我们该采取怎样的应对举措呢？我们会试着针对他们所提交上来的代码开展测试工作，之后呈现出错误信息，又或者是准许用户接着去做下一道题目。以下便是一种有可能出现的工作流程：

某组件，于用户单击之时，于事件调用当中，借由回调之形式，将相关情况传达给父组件。

组件会借助另一个回调函数，去通知它的父组件，也就是组件，并且会把用户的当前代码，传递给父组件。

组件将针对用户的代码进行测试。

根据结果的不同……

组件会对中的属性赋值，则会依次为它的子组件中的属性赋值。

若是用户已然达成了该练习的全部测试，那么组件将会针对组件里的属性进行赋值。

要是我们的组件，都能够如同在组件里的方法那边如此去进行声明codejock skin builder，这是同样进行了大量简化的情况，那么借助一个单一的函数调用方式，就能去达成整个UI的更新：

要记好，React里掺和着HTML标记在里头。于这个例子而言，方法设定了一个组件，这里面涵盖着一个组件以及一个组件。

我们能够对组件的状态予以更新，此操作会致使组件进行重绘，并且在有必要的情形下对其子组件实施更新。

这便是全部的代码，React借助一种优雅且简单的途径，为我们处理UI的更新作业。

大型应用程序中的考虑因素：信息流动

等同我先前讲过的那般，React并非必定要依从MVC模型，事实上，你能够依照任何你所喜好的方式去处理信息的流动，然而你需要一种确切明了的信息策略。为了使得属性的改变能够传递给子-子-子-子-子组件，你到底需不需要把该属性一直传递下去呢，哪怕中间的那些子组件根本不需要知晓该属性吗？要是该叶子节点接收用户输入，那它又要怎样把这一变更告知它的父-父-父-父组件呢？

置于大型应用程序里头，这般处理方式着实相当令人受挫。乃至是位于上述那极简单的示例当中，Run按钮究竟该以何种方式与组件之间去传递用户的行为呢？我们是需要传递回调函数的可是以这种方式却极难写出真正具备模块化、能够实现可重用特性的组件。

所述解决方案是借助创建通信适配器（），借此管理各别组件之间的信息流动。它与传递回调函数的那种方式不一样，高层次组件之一codejock skin builder，比如会接收到这样某一个，它为关键通信任务给出了一种单一接口。比如说吧，在处于显示状态之际，会创建那么一个，此能够生成并处理与用户提交代码相关的事件。

不是说这种方式全然不存在缺陷，在React大会演讲里，于这一点我做了详尽论述，我的关键观点是，在组件树当中啊，不管你怎样去处置信息的流动之事，你们的团队都得坚守一种始终如一的统筹方法，是这样去做的，是要这样坚持的，是得如此坚守的。

大型应用程序中的考虑因素：整合

初次接触React时，上手过程显得十分简易迅速，然而若想要令此技术在你自身的那个工作流程里，能够实现高效运用的预期效果，那么你得获取一些工具作为必备的支撑才行。就用实例来讲，我们选用了以下这些工具：

用一段脚本，对.jsx文件的本地文化进行监控。在必要的时候，对它们进行重新编译。

一个独立的node.js服务器，用于处理服务端的展示

用于在需要时自动生成新组件文件的开发者工具

上述这些工具均并非极为复杂。对于.jsx的监控而言，Gulp是个不错的选择，然而我们选用了运用Go语言自行撰写脚本。我们采用了一个简易的批处理脚本用以生成新的组件文件，此种方式也能够保证命名规范。要是你打算运用一个node.js服务器来负责服务端展示，你需要留意的是，要强制.js能够获取到React代码中的变更或许会存在些难度，所以我们创建了一个监控器，使其在必要的时候重启node服务器。

为什么使用React？

我们在重新设计整套学习环境之际，需去决定选用哪一套工具或者框架，最终我们选定了React，对此决定我们怀揣着极度的满意之情。

我们对于React的欣赏之处主要在于以下几个方面：

它经过了实战检验

React于已投入使用的生产环境里被加以应用，所以我们针对其性能以及可靠性满怀信心。截至目前，在我们的平台之上它同样呈现出良好的表现，并且我们尚未遇见任何严重的问题。

组件化的方式便于理解

React针对每个独自的、独立开来的组件予以逐个单独地处理，这些被单独处理的组件会依照它自身内部所具有的状态情况展开展现，所以基于此，对于某一个特定时刻究竟应该发生什么事情，能够很轻易地形成一种概念化方面的理解，你的应用程序就会切实有效地变成一个规模较大的状态机，这表明你能够单独对UI里的每个片段部分进行测试，同样还能够自由自在地去添加新的组件，而根本不必忧心会对整个应用程序里其他部分的代码造成影响。

SEO非常容易实现

因React自身就具备服务端展现的支持功能，所以在搜索引擎的视角里，你所提供的是一个基本已然完成了的页面，这对于SEO而言是一种极大优越之处，而且所需开展的工作量极为微小。确实如此，这一点必定得通过Node予以达成。鉴于主应用是由Rails所编写的，故而我们构建了一个单独的Node服务器，专门用以处理React的展现。

React能够兼容遗留代码，并且它的灵活性足以应对未来

虽然采用一整套框架确实是一件大事，不过你能够慢慢地试着把React添加到现有的代码库里，与之相似，要是将来我们需要移除React，我们同样能够轻易地达成这一点。在，我们首先决定完全借助React去编写一个全新的项目，以此来尝试它的功能，并且学习怎样以最佳的方式运用它。这个项目很成功，所以我们现在基本上在所有的新UI元素当中都运用React了。我提议你起初去做些功课，构建一些实验项目，而后再思索怎么使React适配你的已然存在的代码库。

不必担心编写样板代码了

如果编写样板代码所耗费的时间越少，那么也就意味着能够把更多时间花费在更具意义的问题之上了。从这样的角度来讲，React是一个既简洁又属于轻量级的类库。像下面的代码就是创建一个新组件所需要的最少代码：

简短且切题，还有什么不满意的？

我们的社区正在成长

非常迅速地发展着的是React社区。当你碰到各种各样的问题之际，你能够跟好多社区成员探讨该问题。并且，鉴于好多公司都已在生产环境里运用了React（仅列举几个，、、Yahoo!、和），所以我们并非孤独的。

总结

React是个轻量级的类库，它强大而且经过实战检验，用于创建用户界面。它不是框架，是强大的工具，或会改变你前端开发的方式。我们觉得它对我们前端开发来说，作用大到难以置信，我们对自己的选择很满意。对我而言，用React工作至少极大影响了我思考编写用户界面的方式。我同样乐意见到React持续地成长，当下运用React，把React自身的功能付诸于移动开发领域，我觉得它往后必定会是前景一片光明的。

倘若你计划着手运用React，那它的教程是个挺好的逻辑起始点。在互联网上，也存在着众多阐述React里关键概念的帖子。别停下前行的步伐，要学习探究，试着去创建些事物，接着瞧瞧你对React这种前端开发方式有着怎样的看法。我们极为乐意倾听你的想法。

关于作者

是一位源自.com 的软件工程师 ，她近期才从普林斯顿大学、计算机科学专业那儿毕业 ，她对于硬件也心怀些兴趣 ，于业余时段喜好去从事某些方面的工作 ，还有乐曲编辑工作 ，她所拥有的帐号是@。

【QCon北京2015】，有个前端专题是永不止步的那种，它是由蚂蚁金服体验技术部负责的人王保平也就是玉伯来主持的，主要重点讨论这些内容：移动H5应用的开发，这里面包含Web与的融合；企业平台类富应用的开发，涉及、React、等技术方向；前端工程与质量体系的建设，要关注团队的高效协同以及品质把控；前端工程师的历史转身，他们该何去何从。敬请期待。

如有侵权请联系删除！