翻譯 | 《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 handler
const [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 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、桌面和移動應用程序的接口，將其付諸實踐。

若是有理解不到位的地方，歡迎你們糾錯。若是以爲還能夠，麻煩您點贊收藏或者分享一下，但願能夠幫到更多人。