React.js在Codecademy中的实际应用.docx

React.js在Codecademy中的实际应用自从HTML5变得流行以来，整个Web平台取得了长足的进步，人们也开始将JavaScript视为一门能够创建复杂应用的语言。许多新的API纷纷浮现，而关于浏览器如何应用这些技术的文章也大量涌现。这一系列文章的视角更进一步，它们将关注于如何在实践中应用这些强大的技术，这并不是指创建多么酷炫的示例和原型，而是在第一线进行实际应用。在这个（后）HTML5系列文章中，我们不需要响亮的口号，而是基于行业专家的实际经验，获得实践性的见解。我们也将讨论那些更进一步的技术（例如AngularJS），并对web标准和web开发的未来进行定义。发布在InfoQ上的这篇文章是“下个时代的HTML5和JavaScript”系列文章其中的一篇。你可以订阅本系列文章，通过RSS获取文章更新的通知。2014年八月，Codecademy为了更新用户的学习体验，决定采用Facebook的React.js库，这是一个用于编写JavaScript UI的类库。在开始阶段，我们的问题是很难找到React在复杂应用中应用的示例，例如像Codecademy这样复杂的应用。因为大多数的教程都是针对小型示例应用上的特性，而不是针对在开发大型应用中更常见的问题。在本文中，我不仅会对React的使用进行一番概述，还会特别说明在大型web应用程序中使用React的某些特别注意事项。React是什么？简单来说：React是一个使用JavaScript创建用户界面的代码库。与编写用户界面常见的方式不同，React将每个UI元素视为一个抑制的状态机。它并不是类似于AngularJS这样的“框架”。虽然Facebook有时会将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中，所有的组件都必须继承自Component类。组件中包含了属性（由父类决定）和状态（能够自行改变，通常是基于用户行为进行改变），组件的渲染和行为应当完全由它们的状态和属性所决定（而不依赖于任何其它值），因此组件就是状态机。这一模型鼓励使用者创建模块化的UI，并且在实践中能够简化UI的操作与创建工作。React将标记紧密地结合在JavaScript中。虽然在JavaScript中编写HTML代码听起来很奇怪，但在React中这是一种自然的选择。JSX是原生的JS与HTML标记相结合的一种语言，对于它的使用是可选的，但我强烈建议你选择这种方式。React认为，由于你的标记已经紧密地结合在控制这些标记的JavaScript中，因此可以将它们安置在同一个文件中，我也同意这一看法。单向信息流动。这一点更多的是一种通用的React模式，而不是一种严格的规则。信息的流动在React中倾向于单向流动。在本文的稍后部分中，当我们开始考虑在大型应用程序中如何处理信息流动时，会再次提及这一模式。解析React应用程序为了让这些原则显得更为清晰，让我们看看Codecademy的学习环境是如何使用React进行构建的。（单击图片以放大）图1：学习环境。正如你在这个屏幕截图中所看到的一样，主要的学习环境由多个不同的UI元素所组成。某些元素是始终展现在页面上的，例如header、menu和navigation。而有些组件会根据当前的练习的不同，处于显示或是不显示的状态。比方如，根据课程的不同，web浏览器、命令行和代码编辑器可能会进行混合或是匹配。创建该界面的逻辑解决方案是为各个部分创建React组件。在下面的屏幕截图中，我将特别指出主要的React组件：（单击图片以放大）图2：学习环境以及对应的组件。每个组件都有可能包含多个子组件：比方如，屏幕左方的Lesson面板实际上就包含了多个组件：（单击图片以放大）图3：组成Lesson组件的各个子组件。在这个示例中，我们将使用React以