單頁面應用程序

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

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

ES6, ES2015, ES2016, etc

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

編譯器

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

捆扎機

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

包管理員

包管理器是允許您管理項目中的依賴項的工具。npm和Yarn是React應用程序中常用的兩個包管理器。他們都是同一個npm包注冊表的客戶端。

CDN

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

JSX

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

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

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

分子

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

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

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

組件

React組件是小的，可重用的代碼段，它返回一個React元素以呈現(xiàn)給頁面。React組件的最簡單版本是一個普通的JavaScript函數(shù)，它返回一個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ù)字。一個好的經(jīng)驗法則是，如果你的用戶界面的一部分被多次使用（按鈕，面板，頭像），或者它自己已經(jīng)足夠復雜（App，F(xiàn)eedStory，Comment），那么它是一個很好的候選者，可以成為一個可重用的組件。組件名稱也應始終以大寫字母（<Wrapper/> 不 <wrapper/>）開頭。有關(guān)渲染組件的更多信息，請參閱此文檔。

props

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

請記住，這props是只讀的。不應以任何方式對其進行修改：

// Wrong!props.number = 42;

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

props.children

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

<Welcome>Hello world!</Welcome>

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

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

對于定義為類的組件，請使用this.props.children：

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

state

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

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

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

生命周期方法

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

受控組件與非受控組件

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

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

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

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

Keys

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

鍵只需要在同一陣列中的同級元素中是唯一的。它們不需要在整個應用程序或甚至單個組件中都是唯一的。

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

Refs

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

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

Events

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

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

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

和解

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