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

不止是UIReact的使用场景探索React不仅是一个强大的交互式UI渲染类库，而且还提供了一个用于处理数据和用户输入的绝佳方法。它倡导可重用并且易于测试的轻量级组件。不仅在Web应用中，这些重要的特性同样适用于其他的技术场景。在这一部分内容中，我们将会看到如何在下面的场景中使用React：桌面应用 游戏 电子邮件 绘图 桌面应用借助 atom-shell 或者 node-webkit 这类项目，我们可以在桌面上运行一个 Web应用。来自 Github 的 Atom Editor 就是使用 atom-shell 以及 React创建的。下面将 atom-shell 应用于我们的SurveyBuilder。首先，从这里下载并且安装 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。下面，深入地看一下实现过程。源码被分为两部分。第一部分是用于实现游戏逻辑的全局函数，第二部分是React 组件。你马上会看到游戏桌面的初始数据结构。var?initial_board?=?{???a1:null,?a2:null,?a3:null,?a4:null,???b1:null,?b2:null,?b3:null,?b4:null,???c1:null,?c2:null,?c3:null,?c4:null,???d1:null,?d2:null,?d3:null,?d4:null?};?桌面的数据结构是一个对象，它的 key 与 CSS中定义的虚拟网格位置直接相关。继初始化数据结构后，你将会看到一系列的函数对该给定数据结构进行操作。这些函数都按照固定的方式执行，返回一