关于前端:翻译-JavaScript-Everywhere第11章-用户界面和React

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

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

为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。

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

1979年，驰名的史蒂夫·乔布斯（Steve Jobs）拜访了施乐帕克（Xerox Parc），在那里他看到了施乐 Alto 集体计算机的演示。过后其余计算机是由键入命令管制的，而 Alto 则应用鼠标并具备可关上和敞开的窗口图形界面。乔布斯在最后的 Apple Macintosh 的创作中持续借鉴了这些想法。原始 Mac 的风行导致计算机 UI 的激增。明天，在通常的一天，咱们可能会与许多图形用户界面进行交互，其中可能包含集体计算机以及智能手机，平板电脑，ATM，游戏机等。用户界面当初围绕着咱们，能够跨各种设施、内容类型、屏幕尺寸和交互格局应用。

例如，我最近去了另一个城市散会。那天早上，我醒来并在手机上查看了航班状态。我开车开车去机场，屏幕上显示了地图，让我能够抉择正在听的音乐。途中，我停在 ATM 机上取回一些现金，输出 PIN 码并在触摸屏上输出指令。达到机场时，我在一个登机台登机。在登机口等车时，我在平板电脑上回复了几封电子邮件。在航行中，我在电子墨显示设施上看了一本书。起飞后，我通过手机上的一个应用程序来找车骑行，而后停下来吃午餐，在显示屏上选定了我的订单。在会议上，一个幻灯片投影到了屏幕平台上，而咱们许多人在笔记本电脑上做笔记。当黄昏回到我的酒店时，通过酒店电视屏幕菜单，我浏览了找到的电视和电影产品。我的一天充斥了许多 UI 和屏幕尺寸，用于实现与生存的外围因素（如交通，金融和娱乐）相干的工作。

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

最后设计于 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 是惟一真正的跨平台用户界面平台。

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

随着 React 和相似库（例如 Vue.js）的衰亡，咱们曾经看到开发人员编写UI 的形式产生了变动。这些框架提供了一种在组件级别治理 UI 状态的办法。这使用户对应用程序感到晦涩，同时提供了杰出的开发体验。借助诸如用于构建桌面应用程序的 Electron 和用于跨平台本机挪动应用程序的 React Native 之类的工具，开发人员和团队当初能够在其所有应用程序中利用这些范例。

在其余各章中，咱们将依附 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 时，我立刻强烈的不喜爱它。然而，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 handler
const [sparkle, addSparkle] = useState('');
return (
<div>
<p>{sparkle}</p>
</div>
);
}
export default Sparkle;

咱们将在第 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 handler
const [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、桌面和挪动应用程序的接口，将其付诸实践。

如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦您点赞珍藏或者分享一下，心愿能够帮到更多人。

关于前端:翻译-JavaScript-Everywhere第11章-用户界面和React

写在最后面

第 11 章用户界面和 React

JavaScript 和 UI

JavaScript 的申明式接口

React 足够了

JSX？

什么是 State？

论断