不止是UI eact的使用场景探索.docxVIP

不止是UI React的使用场景探索 React不仅是一个强大的交互式UI渲染类库，而且还提供了一个用于处理数据和用户输入的绝佳方法。它倡导可重用并且易于测试的轻量级组件。不仅在Web应用中，这些重要的特性同样适用于其他的技术场景。 在这一部分内容中，我们将会看到如何在下面的场景中使用React： 桌面应用 游戏 电子邮件 绘图 桌面应用 借助 atom-shell 或者 node-webkit 这类项目，我们可以在桌面上运行一个 Web应用。来自 Github 的 Atom Editor 就是使用 atom-shell 以及 React创建的。 下面将 atom-shell 应用于我们的 HYPERLINK /backstopmedia/bleeding-edge-sample-app \t _blank SurveyBuilder。 首先，从 HYPERLINK /atom/atom-shell \t _blank 这里下载并且安装 atom-shell。使用下面的 desktop 脚本运行 atom-shell，就可以在窗口中打开该应用。 //?desktop.js? var?app?=?require(app);? var?BrowserWindow?=?require(browser-window);? //?加载?SurveyBuilder?服务，然后启动它。? var?server?=?require(./server/server);? server.listen(8080);? //?向我们的服务提供崩溃报告。? require(crash-reporter).start();? //?保留?window?对象的一个全局引用。? //?当?javascript?对象被当作垃圾回收时，窗口将会自动关闭。? var?mainWindow?=?null;? //?当所有窗口都关闭时退出。? app.on(window-all-closed,?function()?{? ??if?(process.platform?!=?darwin)? ????app.quit();? });? //?当?atom-shell?完成所有初始化工作并准备创建浏览器窗口时，会调用下面的方法。? app.on(ready,?function()?{? ??//?创建浏览器窗口。? ??mainWindow?=?new?BrowserWindow({? ????width:?800,? ????height:?600? ??});? ??//?加载应用的?index.html?文件。? ??//?mainWindow.loadUrl(file://?+?__dirname?+?/index.html);? ??mainWindow.loadUrl(http://localhost:8080/);? ??//?在窗口关闭时触发。? ??mainWindow.on(closed,?function()?{? ????//?直接引用?window?对象，如果你的应用支持多个窗口，通常需要把?window?存储到? ????//?一个数组中。此时，你需要删除相关联的元素。? ????mainWindow?=?null;? ??});? });? 借助 atom-shell 或者 node-webkit 这类项目，我们可以将创建 web的技术应用于创建桌面应用。就像开发 web 应用一样，React同样可以帮助你构建强大的交互式桌面应用。 游戏 通常，游戏对用户交互有很高的要求，玩家需要及时地对游戏状态的改变做出响应。相比之下，在绝大多数web应用中，用户不是在消费资源就是在产生资源。本质上，游戏就是一个状态机，包括两个基本要素： 更新视图 响应事件 在本书概览部分，你应该已经注意到：React关注的范畴比较窄，仅仅包括两件事： 更新 DOM 响应事件 React 和游戏之间的相似点远不止这些。React 的虚拟 DOM 架构成就了高性能的3D 游戏引擎，对于每一个想要达到的视图状态，渲染引擎都保证了对视图或者DOM 的一次有效更新。 2048这个游戏的实现就是将 React 应用于游戏中的一个示例。这个游戏的目的是把桌面上相匹配的数字结合在一起，直到2048。 下面，深入地看一下 HYPERLINK /karlmikko/cdnh399c/ \t _blank 实现过程。源码被分为两部分。第一部分是用于实现游戏逻辑的全局函数，第二部分是React 组件。你马上会看到游戏桌面的初始数据结构。 var?initial_board?=?{? ??a1:null,?a2:null,?a3:null,?a4:null,? ??b1:null