單頁面應(yīng)用程序

單頁面應(yīng)用程序是一個(gè)加載單個(gè)HTML頁面和應(yīng)用程序運(yùn)行所需的所有必要資源（如JavaScript和CSS）的應(yīng)用程序。任何與頁面或后續(xù)頁面的交互都不需要往返服務(wù)器，這意味著頁面不會(huì)被重新加載。

雖然您可以在React中構(gòu)建一個(gè)單頁面應(yīng)用程序，但這不是必需的。React還可用于增強(qiáng)現(xiàn)有網(wǎng)站的小部分，并增加交互性。用React編寫的代碼可以通過PHP或其他客戶端庫來呈現(xiàn)在服務(wù)器上的標(biāo)記和平共存。事實(shí)上，這正是Facebook如何使用React。

ES6, ES2015, ES2016, etc

這些首字母縮寫詞都是指ECMAScript語言規(guī)范標(biāo)準(zhǔn)的最新版本，這是JavaScript語言的一個(gè)實(shí)現(xiàn)。ES6版本（也稱為ES2015）包含許多以前版本的新增功能，例如：箭頭函數(shù)，類，模板文字let和const語句。

編譯器

JavaScript編譯器接受JavaScript代碼，將其轉(zhuǎn)換并以不同的格式返回JavaScript代碼。最常見的用例是采用ES6語法并將其轉(zhuǎn)換為舊版瀏覽器能夠解釋的語法。Babel是React最常用的編譯器。

捆扎機(jī)

Bundlers將JavaScript和CSS代碼作為單獨(dú)的模塊（通常為數(shù)百個(gè)）編寫，并將它們組合成更好的瀏覽器優(yōu)化的幾個(gè)文件。React應(yīng)用程序中常用的一些打包器包括Webpack和Browserify。

包管理員

包管理器是允許您管理項(xiàng)目中的依賴項(xiàng)的工具。npm和Yarn是React應(yīng)用程序中常用的兩個(gè)包管理器。他們都是同一個(gè)npm包注冊(cè)表的客戶端。

CDN

CDN代表內(nèi)容傳送網(wǎng)絡(luò)。CDN從全球各地的服務(wù)器網(wǎng)絡(luò)提供緩存的靜態(tài)內(nèi)容。

JSX

JSX是JavaScript的語法擴(kuò)展。它與模板語言類似，但它具有JavaScript的全部功能。JSX被編譯為React.createElement()調(diào)用，它返回名為“React元素”的普通JavaScript對(duì)象。要獲得對(duì)JSX的基本介紹，請(qǐng)參閱此處的文檔，并在此處查找關(guān)于JSX的更深入的教程。

React DOM使用camelCase屬性命名約定而不是HTML屬性名稱。例如，tabindex成為tabIndexJSX。該屬性class也被寫為className自從class在JavaScript中是一個(gè)保留字：

const name = 'Clementine';ReactDOM.render(  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root'));

元素

React元素是React應(yīng)用程序的構(gòu)建塊。人們可能會(huì)將元素與更廣為人知的“組件”概念混為一談。一個(gè)元素描述了你想要在屏幕上看到的內(nèi)容。React元素是不可變的。

const element = <h1>Hello, world</h1>;

通常，元素不是直接使用，而是從組件返回。

組件

React組件是小的，可重用的代碼段，它返回一個(gè)React元素以呈現(xiàn)給頁面。React組件的最簡(jiǎn)單版本是一個(gè)普通的JavaScript函數(shù)，它返回一個(gè)React元素：

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;}

組件也可以是ES6類：

class Welcome extends React.Component {  render() {    return <h1>Hello, {this.props.name}</h1>;  }}

組件可以分解成不同的功能塊并在其他組件中使用。組件可以返回其他組件，數(shù)組，字符串和數(shù)字。一個(gè)好的經(jīng)驗(yàn)法則是，如果你的用戶界面的一部分被多次使用（按鈕，面板，頭像），或者它自己已經(jīng)足夠復(fù)雜（App，F(xiàn)eedStory，Comment），那么它是一個(gè)很好的候選者，可以成為一個(gè)可重用的組件。組件名稱也應(yīng)始終以大寫字母（<Wrapper/> 不 <wrapper/>）開頭。有關(guān)渲染組件的更多信息，請(qǐng)參閱此文檔。

props

props是React組件的輸入。它們是從父組件傳遞到子組件的數(shù)據(jù)。

請(qǐng)記住，props是只讀的。不應(yīng)以任何方式對(duì)其進(jìn)行修改：

// Wrong!props.number = 42;

如果您需要修改某些值以響應(yīng)用戶輸入或網(wǎng)絡(luò)響應(yīng)，請(qǐng)state改為使用。

props.children

props.children在每個(gè)組件上都可用。它包含組件的開始和結(jié)束標(biāo)簽之間的內(nèi)容。例如：

<Welcome>Hello world!</Welcome>

字符串在組件中Hello world!可用：props.childrenWelcome

function Welcome(props) {  return <p>{props.children}</p>;}

對(duì)于定義為類的組件，請(qǐng)使用this.props.children：

class Welcome extends React.Component {  render() {    return <p>{this.props.children}</p>;  }}

state

state當(dāng)與其關(guān)聯(lián)的某些數(shù)據(jù)隨時(shí)間變化時(shí)，組件需要。例如，Checkbox組件可能需要isChecked處于其狀態(tài)，NewsFeed組件可能需要跟蹤fetchedPosts其狀態(tài)。

之間最重要的區(qū)別state和props是props從父組件傳遞，而是state由組件本身進(jìn)行管理。一個(gè)組件不能改變它props，但它可以改變它state。要這樣做，它必須打電話this.setState()。只有定義為類的組件可以具有狀態(tài)。

對(duì)于每一個(gè)特定的變化數(shù)據(jù)，應(yīng)該只有一個(gè)組件“擁有”它的狀態(tài)。不要嘗試同步兩個(gè)不同組件的狀態(tài)。相反，將它提升到最接近的共同祖先，并將它作為道具傳遞給它們兩個(gè)。

生命周期方法

生命周期方法是在組件的不同階段執(zhí)行的自定義功能。當(dāng)組件被創(chuàng)建并插入到DOM中時(shí)（安裝），組件更新時(shí)，組件被卸載或從DOM中移除時(shí)，都有可用的方法。

受控組件與非受控組件

React有兩種不同的方法來處理表單輸入。

其值由React控制的輸入表單元素稱為受控組件。當(dāng)用戶將數(shù)據(jù)輸入受控組件時(shí)，會(huì)觸發(fā)更改事件處理程序，并且您的代碼將決定輸入是否有效（通過使用更新的值重新呈現(xiàn)）。如果你不重新渲染，那么表單元素將保持不變。

一個(gè)不受控制的組件就像表單元素在React之外工作一樣。當(dāng)用戶將數(shù)據(jù)輸入到表單域（輸入框，下拉菜單等）時(shí)，更新后的信息會(huì)被反映出來，而不需要React需要做任何事情。然而，這也意味著你不能強(qiáng)迫這個(gè)領(lǐng)域有一定的價(jià)值。

在大多數(shù)情況下，您應(yīng)該使用受控組件。

Keys

“鍵”是在創(chuàng)建元素?cái)?shù)組時(shí)需要包含的特殊字符串屬性。鍵可幫助React識(shí)別哪些項(xiàng)目已更改，添加或刪除。應(yīng)該給數(shù)組內(nèi)的元素賦予元素一個(gè)穩(wěn)定的標(biāo)識(shí)。

鍵只需要在同一陣列中的同級(jí)元素中是唯一的。它們不需要在整個(gè)應(yīng)用程序或甚至單個(gè)組件中都是唯一的。

不要傳遞像Math.random()鍵的東西。密鑰在重新呈現(xiàn)中具有“穩(wěn)定身份”非常重要，以便React可以確定何時(shí)添加，刪除或重新排序項(xiàng)目。理想情況下，密鑰應(yīng)與來自數(shù)據(jù)的唯一且穩(wěn)定的標(biāo)識(shí)符相對(duì)應(yīng)，例如post.id。

Refs

React支持可以附加到任何組件的特殊屬性。該ref屬性可以是字符串或回調(diào)函數(shù)。當(dāng)ref屬性是回調(diào)函數(shù)時(shí)，該函數(shù)接收底層DOM元素或類實(shí)例（取決于元素的類型）作為其參數(shù)。這使您可以直接訪問DOM元素或組件實(shí)例。

謹(jǐn)慎使用參考。如果您發(fā)現(xiàn)自己經(jīng)常在應(yīng)用中使用參考“讓事情發(fā)生”，請(qǐng)考慮更熟悉自頂向下的數(shù)據(jù)流。

Events

使用React元素處理事件有一些語法上的差異：

• React事件處理程序使用camelCase命名，而不是小寫。

• 使用JSX，您將傳遞函數(shù)作為事件處理函數(shù)，而不是字符串。

和解

當(dāng)組件的道具或狀態(tài)發(fā)生變化時(shí)，React通過比較新返回的元素和先前渲染的元素來決定是否需要實(shí)際的DOM更新。當(dāng)它們不相等時(shí)，React將更新DOM。這個(gè)過程被稱為“和解”。