翻译 | 《JavaScript Everywhere》第11章 用户界面和React（^_^）

翻译 | 《JavaScript Everywhere》第11章 用户界面和React（^_）

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。

(σﾟ∀ﾟ)σ…:*☆哎哟不错哦

第11章 用户界面和React

1979年，著名的史蒂夫·乔布斯（Steve Jobs）访问了施乐帕克（Xerox Parc），在那里他看到了施乐Alto个人计算机的演示。当时其他计算机是由键入命令控制的，而Alto则使用鼠标并具有可打开和关闭的窗口图形界面。乔布斯在最初的Apple Macintosh的创作中继续借鉴了这些想法。原始Mac的流行导致计算机UI的激增。今天，在通常的一天，我们可能会与许多图形用户界面进行交互，其中可能包括个人计算机以及智能手机，平板电脑，ATM，游戏机等。用户界面现在围绕着我们，可以跨各种设备、内容类型、屏幕尺寸和交互格式使用。

例如，我最近去了另一个城市开会。那天早上，我醒来并在手机上查看了航班状态。我开车开车去机场，屏幕上显示了地图，让我可以选择正在听的音乐。途中，我停在ATM机上取回一些现金，输入PIN码并在触摸屏上输入指令。到达机场时，我在一个登机台登机。在登机口等车时，我在平板电脑上回复了几封电子邮件。在飞行中，我在电子墨显示设备上看了一本书。降落后，我通过手机上的一个应用程序来找车骑行，然后停下来吃午餐，在显示屏上选定了我的订单。在会议上，一个幻灯片投影到了屏幕平台上，而我们许多人在笔记本电脑上做笔记。当傍晚回到我的酒店时，通过酒店电视屏幕菜单，我浏览了找到的电视和电影产品。我的一天充满了许多UI和屏幕尺寸，用于完成与生活的核心要素（如交通，金融和娱乐）相关的任务。

在本章中，我们将简要介绍JavaScript用户界面开发的历史。掌握了这些背景知识之后，我们将探索React的基础知识，这本书的其余部分将使用的JavaScript库。

JavaScript和UI

最初设计于1990年代中期（不出名的，10 days），以增强Web界面，JavaScript在Web浏览器中提供了嵌入式的脚本语言。这使Web设计人员和开发人员可以向网页添加仅靠HTML无法实现的交互。不幸的是，每个浏览器供应商都有不同的JavaScript实现，因此很难使用。这是导致旨在在单个浏览器中工作的应用程序激增的因素之一。

在2000年代中期

jQuery（以及类似的库，例如MooTools）开始流行。jQuery允许开发人员使用简单的API编写JavaScript，该API在各种浏览器之间都能很好地运行。不久之后，我们都可以将网页上的内容删除、添加、替换和设置动画。大约在同一时间，Ajax（“异步JavaScript和XML”的缩写）使我们能够从服务器获取数据并将其注入到页面中。这两种技术的结合为创建功能强大的交互式Web应用程序提供了一个生态系统。

随着这些应用程序的复杂性增加，对组织和样代码的需求也并行增长。到2010年代初，诸如Backbone，Angular和Ember之类的框架开始主导JavaScript应用程序领域。这些框架通过在框架代码中强加结构并实现通用应用程序模式来工作。这些框架通常是根据软件设计的模块、视图、控制器（MVC）模式进行建模的。每个框架都对Web应用程序的所有层进行规范，提供了一种结构化的方式来处理模板、数据和用户交互。尽管这样做有很多好处，但也意味着集成新技术或非标准技术的工作量可能会很大。

同时，桌面应用程序继续用系统特定的编程语言编写。这意味着开发人员和团队经常被迫做出一种或两种风格的选择（Mac应用程序或Windows应用程序，Web应用程序或桌面应用程序等）。移动应用程序处于类似位置。响应式Web设计的兴起意味着设计师和开发人员可以为移动Web浏览器创建真正令人难以置信的网站和应用程序，但是选择构建仅基于Web的应用程序将其锁定在移动平台应用程序仓库之外。Apple的iOS应用程序是用Objective C（以及最近的Swift）编写的，而Android则依靠Java编程语言（不要与我们的朋友JavaScript混淆）。这意味着由HTML，CSS和JavaScript组成的Web是唯一真正的跨平台用户界面平台。

JavaScript的声明式接口

在2010年代初期，Facebook的开发人员在其JavaScript代码的组织和管理方面面临挑战。作为回应，软件工程师Jordan Walke在Facebook的PHP库XHP的启发下编写了React。React与其他流行的JavaSript框架的不同之处在于，它仅专注于UI的呈现。为此，React采用了“声明性”编程方法，这意味着它提供了一种抽象，允许开发人员专注于描述UI的状态。

随着React和类似库（例如Vue.js）的兴起，我们已经看到开发人员编写UI的方式发生了变化。这些框架提供了一种在组件级别管理UI状态的方法。这使用户对应用程序感到流畅，同时提供了出色的开发体验。借助诸如用于构建桌面应用程序的Electron和用于跨平台本机移动应用程序的React Native之类的工具，开发人员和团队现在可以在其所有应用程序中利用这些范例。

React足够了

在其余各章中，我们将依靠React库来构建我们的UI。你不需要具备任何React的使用经验，但是在使用之前，如果你对语法有所了解，这样会对使用有所帮助。为此，我们将使用create-react-app搭建一个新项目。create-react-app是由React团队开发的工具，它使我们能够快速建立一个新的React项目，并有帮助地抽象出底层的构建工具，例如Webpack和Babel。

在终端应用程序中cd进入项目目录并运行以下命令，这将在名为just-enough-react的文件夹中创建一个新的React应用程序：

$ npx create-react-app just-enough-react
$ cd just-enough-react

运行这些命令将在just-enough-react中输出一个目录，该目录包含所有项目结构、代码依赖关系和用于构建功能齐全的应用程序的开发脚本。通过运行以下命令启动应用程序：

$ npm start

现在，我们的React应用程序将在浏览器中的http://localhost:3000上可见（图11-1）。

图11-1输入npm start将在浏览器中启动默认的create-react-app

现在，我们可以通过更改src/App.js文件开始编辑我们的应用程序。该文件包含我们的主要React组件。在需要一些依赖关系之后，它包含一个返回一些类似于HTML的标记的函数：

function App() {return (// markup is here)
} 

组件中使用的标记称为JSX。

JSX是一种类似于XML的基于XML的语法，它使我们能够精确地描述UI并将其与JavaScript文件中的用户操作结合起来。如果你了解HTML，选择JSX就只是需要学习一些小的差异。此示例中的最大区别是HTML的class属性被className替换，以避免与JavaScript的class语法冲突。

JSX？

如果像我一样，你来自网络标准化和严格的关注点分离的时代背景，那么你可能会觉得这很讨厌。我承认，第一次遇到JSX时，我立即强烈的不喜欢它。但是，UI逻辑与呈现输出的耦合提供了许多引人注目的优势，这些优势可能会随着时间的推移而增长。

让我们通过删除大部分样式代码并将其简化为简单的“ Hello World！”来开始自定义我们的应用程序：

import React from 'react';
import './App.css';function App() {return (<div className="App"><p>Hello world!</p></div>);
}export default App; 

你可能会注意到封装了我们所有JSX内容的标签。每个React UI组件必须包含在父HTML元素内或使用React片段，该片段代表非HTML元素容器，例如：

function App() {return (<React.Fragment><p>Hello world!</p></React.Fragment>);
} 

关于React的最强大的功能之一是，我们可以通过将其括在大括号{}中来直接在JSX中使用JavaScript。让我们更新App函数以使用一些变量：

 function App() {const name = 'Adam'const now = String(new Date())return (<div className="App"><p>Hello {name}!</p><p>The current time is {now}</p><p>Two plus two is {2+2}</p></div>);
} 

在前面的示例中，你可以看到我们直接在界面中使用了JavaScript。多么酷啊？

React的另一个有用功能是能够将每个UI功能变成其自己的组件。一个好的经验法则是，如果UI的某个方面以独立的方式运行，则应将其分离为自己的组件。让我们创建一个新组件。首先，在src/Sparkle.js中创建一个新文件，并声明一个新函数：

import React from 'react';function Sparkle() {return (<div></div>);
}export default Sparkle;

现在让我们添加一些功能。每当用户单击一个按钮时，它将在我们的页面中添加闪光的表情符号（任何应用程序的关键功能）。为了做到这一点，我们将导入React的useState组件并为该组件定义一些初始状态，该初始状态将是一个空字符串（换句话说，没有任何闪烁）。

import React, { useState } from 'react';function Sparkle() {// declare our initial component state// this a variable of 'sparkle' which is an empty string// we've also defined an 'addSparkle' function, which// we'll call in our click handlerconst [sparkle, addSparkle] = useState('');return (<div><p>{sparkle}</p></div>);
}export default Sparkle; 

什么是State？

我们将在第15章介绍更详细的state细节，但现在，只需要知道有状态的组件可以在组件中更改任何信息的当前状态。

例如，如果UI组件具有一个复选框，则在选中时其状态为true，而在未选中时状态为false。

现在，我们可以通过添加具有onClick功能的按钮来完成组件。注意驼峰命名，这在JSX中是必需的：

import React, { useState } from 'react';function Sparkle() {// declare our initial component state// this a variable of 'sparkle' which is an empty string// we've also defined an 'addSparkle' function, which// we'll call in our click handlerconst [sparkle, addSparkle] = useState('');return (<div><button onClick={() => addSparkle(sparkle + '\u2728')}>Add some sparkle</button><p>{sparkle}</p></div>);
}export default Sparkle; 

要使用我们的组件，我们可以将其导入到src/App.js文件中，并将其声明为JSX元素，如下所示：

import React from 'react';
import './App.css';// import our Sparkle component
import Sparkle from './Sparkle'function App() {const name = 'Adam';let now = String(new Date());return (<div className="App"><p>Hello {name}!</p><p>The current time is {now}</p><p>Two plus two is {2+2}</p><Sparkle /></div>);
}export default App;

现在，如果你在浏览器中访问我们的应用程序，则应该看到我们的按钮并能够单击它，将闪闪发光的表情符号添加到页面中！这是React的真正超级能力之一。我们能够独立于应用程序的其余部分重新渲染单个组件或组件的元素（图11-2）。

图11-2单击按钮将更新组件状态并将内容添加到我们的页面

现在，我们使用create-react-app创建了一个新应用程序，更新了应用程序组件的JSX，创建了新组件，声明了组件状态，并动态更新了组件。在基本了解这些基础知识之后，我们现在准备使用React使用JavaScript开发声明式UI。

结论

我们被各种设备上的用户界面所包围。JavaScript和Web技术为使用单一技术在多个平台上开发这些接口提供了无与伦比的机会。同时，React和其他声明式视图库使我们能够构建功能强大的动态应用程序。这些技术的结合使开发人员可以构建惊人的东西，而无需在每个平台都具备专门知识。在接下来的章节中，我们将通过使用GraphQL API构建用于Web、桌面和移动应用程序的接口，将其付诸实践。

如果有理解不到位的地方，欢迎大家纠错。如果觉得还可以，麻烦您点赞收藏或者分享一下，希望可以帮到更多人。