489      阿裏雲  技術社區[雲棲]

一篇包含了React所有基本點的文章

去年，我寫了一本關於學習React.js的小書，原來是大約100頁。 今年我要挑戰自己，把它歸納為一篇文章。

本文不會涵蓋什麼是React，或者為什麼要學習它。 相反，這是麵向已經熟悉JavaScript並熟悉DOM API基礎知識的人，對React.js的基礎知識的介紹。

以下所有代碼示例均標示為參考。 它們純粹是為了提供概念而寫的例子。 他們大多數可以寫得更好一些。

1：組件是React的一切

React是圍繞可重用組件的概念設計的。 您定義小組件，並將它們放在一起形成更大的組件。

所有小或小的組件都可重複使用，甚至跨不同的項目。

一個React組件(以其最簡單的形式)是一個簡單的JavaScript函數：

1. // Example 1 
2. // https://jscomplete.com/repl?j=Sy3QAdKHW 
3. function Button (props) { 
4.   // Returns a DOM element here. For example: 
5.   return <button type="submit">{props.label}</button>; 
6. } 
7. // To render the Button component to the browser 
8. ReactDOM.render(<Button label="Save" />, mountNode)  

用於按鈕標簽的花括號將在下麵介紹。 現在不必要擔心他們。 ReactDOM也將在後麵解釋，但是如果要測試這個例子和接下來的代碼示例，render函數就是你需要的。

ReactDOM.render的第二個參數是React將要接管和控製的目標DOM元素。 在jsComplete REPL中，您就可以使用mountNode變量。

關於示例1的注意事項有以下幾點：

• 組件名稱以大寫字母開頭。 這是必需的，因為我們將處理HTML元素和React元素的混合。 小寫名稱保留給HTML元素。 事實上，請繼續嚐試將React組件命名為“button”。 ReactDOM將忽略該函數並呈現常規的空HTML按鈕。
• 每個組件都接收一個屬性列表，就像HTML元素一樣。 在React中，這個列表叫做props。創建功能組件，你可以通過使用任意名稱命名props。
• 在上麵的Button組件的返回中，我們寫出了奇怪的HTML。 這既不是JavaScript也不是HTML，甚至不是React.js。 但是，它非常受歡迎，成為React應用程序中的默認設置。 它被稱為JSX，它是一個JavaScript擴展。 JSX也是妥協! 繼續嚐試在上麵的函數中的任何其他HTML元素，並查看它們是如何支持的(例如，返回一個文本輸入元素)。

2: What the flux is JSX?

上麵的示例1可以用純粹的React.js來編寫，而不需要JSX，如下所示：

1. // Example 2 -  React component without JSX 
2. // https://jscomplete.com/repl?j=HyiEwoYB- 
3. function Button (props) { 
4.   return React.createElement( 
5.     "button", 
6.     { type: "submit" }, 
7.     props.label 
8.   ); 
9. } 
10. // To use Button, you would do something like 
11. ReactDOM.render( 
12.   React.createElement(Button, { label: "Save" }), 
13.   mountNode 
14. );  

上麵的示例1可以用純粹的React.js來編寫，而不需要JSX，如下所示：

createElement函數是React頂級API中函數。 您需要學習的這個級別中共有7件事情中的1項。 可見ReactApi多麼簡短。

很像DOM本身有一個document.createElement函數來創建一個由標簽名稱指定的元素，React的createElement函數是一個更高級別的函數，可以做類似於document.createElement的功能。 但它也可以用於創建一個表示React組件的元素。 當我們使用上麵的例2中的Button組件時，我們這裏就是創建了一個React組件。

與document.createElement不同，React的createElement可以接受第二個參數之後的動態參數，以表示創建的元素的後代。 所以createElement實際上創建一個樹。

這是一個例子：

1. / Example 3 -  React’s createElement API 
2. // https://jscomplete.com/repl?j=r1GNoiFBb 
3. const InputForm = React.createElement( 
4.   "form", 
5.   { target: "_blank", action: "https://google.com/search" }, 
6.   React.createElement("div", null, "Enter input and click Search"), 
7.   React.createElement("input", { name: "q", className: "input" }), 
8.   React.createElement(Button, { label: "Search" }) 
9. ); 
10. // InputForm uses the Button component, so we need that too: 
11. function Button (props) { 
12.   return React.createElement( 
13.     "button", 
14.     { type: "submit" }, 
15.     props.label 
16.   ); 
17. } 
18. // Then we can use InputForm directly with .render 
19. ReactDOM.render(InputForm, mountNode);  

關於以上例子要注意的幾點：

• InputForm不是React組件; 它隻是一個React元素。 這就是為什麼我們直接在ReactDOM.render調用中使用它，而不是使用<InputForm />。
• 我們可以嵌套React.createElement調用，因為它都是JavaScript。
• React.createElement的第二個參數可以是null，也可以是一個空對象，當元素不需要attributes和props時。
• 我們可以將HTML元素與React組件混合使用。 您可以將HTML元素視為內置的React組件。
• React的API嚐試盡可能接近DOM API，因此我們為輸入元素使用className而不是類。 私以為，我們都希望React的API將成為DOM API本身的一部分。 因為，你知道的，這有太多的好處了。

上麵的代碼是您在引入React庫時了解的內容。 瀏覽器不處理任何JSX業務。 然而，我們人類喜歡看HTML並且使用HTML而不是這些createElement調用(想象一下使用document.createElement構建一個網站，我相信你可以的!)。 這就是為什麼存在JSX的原因。 我們可以用非常類似於HTML的語法編寫它，而不是用React.createElement調用上麵的表單：

1. // Example 4 - JSX (compare with Example 3) 
2. // https://jscomplete.com/repl?j=SJWy3otHW 
3. const InputForm = 
4.   <form target="_blank" action="https://google.com/search"> 
5.     <div>Enter input and click Search</div> 
6.     <input name="q" className="input" /> 
7.     <Button label="Search" /> 
8.   </form>; 
9. // InputForm "still" uses the Button component, so we need that too. 
10. // Either JSX or normal form would do 
11. function Button (props) { 
12.   // Returns a DOM element here. For example: 
13.   return <button type="submit">{props.label}</button>; 
14. } 
15. // Then we can use InputForm directly with .render 
16. ReactDOM.render(InputForm, mountNode);  

關於上麵的例子注意以下幾點

• 它不是HTML。 例如，我們仍然在使用className而不是類。
• 我們仍然在考慮將以上HTML作為JavaScript。 看看我在末尾添加了分號。

我們上麵寫的(例4)是JSX。 然而，我們在瀏覽器的執行版本是它的編譯版本(示例3)。 為了實現這一點，我們需要使用預處理器將JSX版本轉換為React.createElement版本。

那就是JSX。 這是一個折中，允許我們以類似於HTML的語法編寫我們的React組件，這是一個很好的共識。

上麵標題中的“Flux”一詞被選為韻腳(...)，但它也是Facebook流行的非常受歡迎的應用程序架構的名稱。 最著名的實現是Redux。

JSX，順便說一下，可以自己在其他地方使用。 這不是隻有在React中才可以使用的。

3: 您可以在JSX中的任何位置使用JavaScript表達式

在JSX部分中，您可以在一對花括號內使用任何JavaScript表達式。

1. // Example 5 -  Using JavaScript expressions in JSX 
2. // https://jscomplete.com/repl?j=SkNN3oYSW 
3. const RandomValue = () =>  
4.   <div> 
5.     { Math.floor(Math.random() * 100) } 
6.   </div>; 
7. // To use it: 
8. ReactDOM.render(<RandomValue />, mountNode);  

任何JavaScript表達式都可以放在那些花括號內。 這相當於JavaScript模板文字中的$ {}插值語法。

這是JSX中唯一的約束：隻有表達式。 所以，你不能使用常規的if語句，但是三元表達式是可以的。

JavaScript變量也是表達式，所以當組件接收到props列表(RandomValue組件沒有，props是可選的)時，可以在花括號內使用這些props。 我們在上麵的Button組件中這樣做了(示例1)。

JavaScript對象也是表達式。 有時候，我們在一個花括號裏麵使用一個JavaScript對象，這使得它看起來像雙花括號，但它實際上隻是一個大括號內的一個對象。 一個用例是將CSS樣式對象傳遞給React中的style屬性：

1. // Example 6 - An object passed to the special React style prop 
2. // https://jscomplete.com/repl?j=S1Kw2sFHb 
3. const ErrorDisplay = ({message}) => 
4.   <div style={ { color: 'red', backgroundColor: 'yellow' } }> 
5.     {message} 
6.   </div>; 
7. // Use it: 
8. ReactDOM.render( 
9.   <ErrorDisplay  
10.     message="These aren't the droids you're looking for"  
11.   />, 
12.   mountNode 
13. );  

請注意，我如何僅解析props參數中的message的。 這是JavaScript。 還要注意上麵的style屬性是一個特殊的屬性(再次，它不是HTML，它更接近於DOM API)。 我們使用一個對象作為style屬性的值。 該對象定義了樣式，就像我們使用JavaScript一樣(因為確實就是)。

甚至可以在JSX中使用React元素，因為這也是一個表達式。 記住，一個React元素就是一個函數調用：

1. const MaybeError = ({errorMessage}) => 
2.   <div> 
3.     {errorMessage && <ErrorDisplay message={errorMessage} />} 
4.   </div>; 
5.    
6. // The MaybeError component uses the ErrorDisplay component: 
7. const ErrorDisplay = ({message}) => 
8.   <div style={ { color: 'red', backgroundColor: 'yellow' } }> 
9.     {message} 
10.   </div>; 
11. // Now we can use the MaybeError component: 
12. ReactDOM.render( 
13.   <MaybeError 
14.     errorMessage={Math.random() > 0.5 ? 'Not good' : ''} 
15.   />, 
16.   mountNode 
17. );  

上麵的MaybeError組件將隻顯示ErrorDisplay組件，如果有一個errorMessage字符串傳遞給它和一個空的div。 React將{true}，{false}，{undefined}和{null}視為沒有呈現任何內容的有效元素子元素。

您還可以使用JSX內的集合上的所有JavaScript方法(map，reduce，filter，concat等)。 再次聲明原因是因為它們返回的是表達式：

1. // Example 8 - Using an array map inside {} 
2. // https://jscomplete.com/repl?j=SJ29aiYH- 
3. const Doubler = ({value=[1, 2, 3]}) => 
4.   <div> 
5.     {value.map(e => e * 2)} 
6.   </div>; 
7. // Use it 
8. ReactDOM.render(<Doubler />, mountNode);  

請注意，我是如何給valueprops默認值的，因為它全是Javascript。 還要注意，我在div中輸出了一個數組表達式，這在React中是可行的。 它將把每一個雙倍的值放在一個文本節點中。

4: 您可以使用JavaScript類編寫React組件

簡單的功能組件非常適合簡單的需求，但有時我們需要更多的功能。 React支持通過JavaScript類語法創建組件。 這是使用類語法編寫的Button組件(在示例1中)：

1. // Example 9 - Creating components using JavaScript classes 
2. // https://jscomplete.com/repl?j=ryjk0iKHb 
3. class Button extends React.Component { 
4.   render() { 
5.     return <button>{this.props.label}</button>; 
6.   } 
7. } 
8. // Use it (same syntax) 
9. ReactDOM.render(<Button label="Save" />, mountNode);  

類語法很簡單。 定義一個擴展了React.Component基類的類(需要學習的另一個頂級的React API)。 該類定義一個唯一實例函數render()，該render函數返回虛擬DOM對象。 每次我們使用上麵的基於Button類的組件(例如，通過執行<Button ... />)，React將從這個基於類的組件中實例化一個對象，並在DOM樹中使用該對象。

這就是為什麼我們在上麵的渲染輸出中在JSX中使用this.props.label的原因。 因為每個組件都獲得一個稱為props的特殊實例屬性，該實例屬性在實例化時保存傳遞給該組件的所有值。

1. // Example 10 -  Customizing a component instance 
2. // https://jscomplete.com/repl?j=rko7RsKS- 
3. class Button extends React.Component { 
4.   constructor(props) { 
5.     super(props); 
6.     this.id = Date.now(); 
7.   } 
8.   render() { 
9.     return <button id={this.id}>{this.props.label}</button>; 
10.   } 
11. } 
12. // Use it 
13. ReactDOM.render(<Button label="Save" />, mountNode);  

我們還可以定義類屬性函數，並在我們想使用的地方使用，包括返回的JSX輸出內：

1. // Example 11 — Using class properties 
2. // https://jscomplete.com/repl?j=H1YDCoFSb 
3. class Button extends React.Component { 
4.   clickCounter = 0; 
5. handleClick = () => { 
6.     console.log(`Clicked: ${++this.clickCounter}`); 
7.   }; 
8.    
9.   render() { 
10.     return ( 
11.       <button id={this.id} onClick={this.handleClick}> 
12.         {this.props.label} 
13.       </button> 
14.     ); 
15.   } 
16. } 
17. // Use it 
18. ReactDOM.render(<Button label="Save" />, mountNode);  

關於例子11有幾點需要注意

• handleClick函數是使用JavaScript中新建的類字段語法編寫的。這種語法仍然屬於stage-2,，但由於很多原因，它是訪問組件安裝實例(由於箭頭功能)的最佳選擇。 但是，您需要使用像Babel這樣的編譯器來配置它來理解stage-2,(或類字段語法)來獲取上麵的代碼。 jsComplete REPL具有預配置。
• 我們還使用相同的類字段語法定義了ClickCounter實例變量。 這允許我們完全跳過使用類構造函數調用。
• 當我們將handleClick函數指定為特殊的onClick，React屬性的值時，我們沒有調用它。 我們把handleClick函數引用傳遞給出去了。 在這個屬性裏麵調用函數是使用React最常見的錯誤之一。 

1. // Wrong: 
2. onClick={this.handleClick()} 
3. // Right: 
4. onClick={this.handleClick}  

5: React的事件中，兩個最重要的區別

在React元素中處理事件時，與DOM API的方式有兩個非常重要的區別：

• 所有React元素屬性(包括事件)使用camelCase命名，而不是小寫。 它是onClick，而不是onclick。
• 我們傳遞一個實際的JavaScript函數引用作為事件處理程序，而不是一個字符串。 它是onClick = {handleClick}，而不是onClick =“handleClick”。

使用自己的對象將DOM事件對象包裝起來，以優化事件處理的性能。 但是在事件處理程序中，我們仍然可以訪問DOM事件對象上可用的所有方法。 React將包裝的事件對象傳遞給每個句柄調用。 例如，為了防止表單從默認提交操作中，您可以執行以下操作：

1. // Example 12 - Working with wrapped events 
2. // https://jscomplete.com/repl?j=HkIhRoKBb 
3. class Form extends React.Component { 
4.   handleSubmit = (event) => { 
5.     event.preventDefault(); 
6.     console.log('Form submitted'); 
7.   }; 
8.    
9.   render() { 
10.     return ( 
11.       <form onSubmit={this.handleSubmit}> 
12.         <button type="submit">Submit</button> 
13.       </form> 
14.     ); 
15.   } 
16. } 
17. // Use it 
18. ReactDOM.render(<Form />, mountNode);  

6: 每一個React組件都有故事

以下僅適用於類組件(擴展為React.Component的組件)。 函數組件有一個略有不同的故事。

1. 首先，我們為React定義一個模板，以從組件創建元素。
2. 然後，我們指示React在某處使用它。 例如，在另一個組件的render調用中，或者使用ReactDOM.render。
3. 然後，React實例化一個元素，並給出一組我們可以使用this.props訪問的props。 那些props正是我們在上麵的步驟2中傳遞的。
4. 由於它都是JavaScript，所以構造方法將被調用(如果已經定義的話)。 這是我們要說的第一個：組件生命周期方法。
5. 然後React計算render方法(虛擬DOM節點)的輸出。
6. 由於這是React渲染元素的第一次，React將與瀏覽器進行通信(代表我們使用DOM API)來顯示元素。 這個過程通常被稱為掛載。
7. 然後，React調用另一個生命周期方法，稱為componentDidMount。 我們可以使用這種方法做一些事情，例如，在DOM上做一些我們現在知道在瀏覽器中支持處理的東西。 在此生命周期方法之前，我們處理的DOM全部是虛擬的。
8. 一些組件故事在這裏結束。 出於各種原因，其他組件可以從瀏覽器DOM中解除掛載。 在後一種情況發生之前，React調用另一個生命周期方法componentWillUnmount。
9. 任何已掛載元件的狀態可能會改變。 該元素的父代可能會重新呈現。 在任一種情況下，安裝的元件可能會接收不同的props。 這裏的魔法發生了，我們現在開始需要React了! 在此之前，我們完全不需要做任何事情
10. 這個組件的故事繼續下去，但在之前，我們需要了解我所說的這個狀態。

7: React組件有一個私有狀態

以下也僅適用於類組件。 有沒有人提到有些人把隻做展現的組件叫做啞巴?

狀態類字段是任何React類組件中的特殊字段。 React監視每個組件狀態以進行更改。 但是對於React要有效地執行這些操作，我們必須通過另一個需要學習的React API函數來更改state字段，this.setState：

1. // Example 13 -  the setState API 
2. // https://jscomplete.com/repl?j=H1fek2KH- 
3. class CounterButton extends React.Component { 
4.   state = { 
5.     clickCounter: 0, 
6.     currentTimestamp: new Date(), 
7.   }; 
8.    
9.   handleClick = () => { 
10.     this.setState((prevState) => { 
11.      return { clickCounter: prevState.clickCounter + 1 }; 
12.     }); 
13.   }; 
14.    
15.   componentDidMount() { 
16.    setInterval(() => { 
17.      this.setState({ currentTimestamp: new Date() }) 
18.     }, 1000); 
19.   } 
20.    
21.   render() { 
22.     return ( 
23.       <div> 
24.         <button onClick={this.handleClick}>Click</button> 
25.         <p>Clicked: {this.state.clickCounter}</p> 
26.         <p>Time: {this.state.currentTimestamp.toLocaleString()}</p> 
27.       </div> 
28.     ); 
29.   } 
30. } 
31. // Use it 
32. ReactDOM.render(<CounterButton />, mountNode);  

這是了解state最重要的例子。 它將完善您對React交互方式的基礎知識。 在這個例子之後，還有一些你需要學習的小事情，但是從這一點來看，它主要是你和你的JavaScript技能。

我們來看一下實例13，從類字段開始。 它有兩個。 特殊狀態字段被初始化為一個對象，該對象包含起始值為0的clickCounter，以及起始值為new Date()的currentTimestamp。

第二個類字段是一個handleClick函數，我們傳遞給render方法中的button元素的onClick事件。 handleClick方法使用setState修改此組件實例狀態。 注意到這一點。

我們在componentDidMount生命周期方法內部啟動的間隔定時器中修改狀態。 它每秒鍾打勾並執行調用this.setState。

在render方法中，我們使用了正常讀取語法對state兩個屬性的讀取。 沒有特殊的API。

現在，請注意，我們使用兩種不同的方式更新了狀態：

1. 傳遞返回一個對象的函數。 我們handleClick函數中實現了這部分內容。
2. 通過傳遞一個常規對象。 我們在間隔回調中實現了。

這兩種方式都是可以接受的，但是當您同時讀取和寫入狀態時，第一個是首選的(我們這樣做)。 在間隔回調之內，我們隻寫給狀態，而不是讀取它。 當兩難時，始終使用第一個函數參數語法。 它更加安全，因為setState實際上是一個異步方法。

我們如何更新狀態? 我們返回一個包含我們要更新的值的對象。 注意在兩次調用setState中，我們隻是從state字段傳遞一個屬性，而不是兩者。 這是完全可以的，因為setState實際上將您傳遞的內容(函數參數的返回值)與現有狀態合並。 因此，在調用setState時不指定屬性意味著我們不希望更改該屬性(而不是刪除它)。

8:React是可以響應的

React從它對狀態變化做出響應的事實(雖然不是反應性的，而是按計劃進行)而得名。 有一個笑話，反應應該被命名為Schedule!

然而，當任何組件的狀態被更新時，我們用肉眼看到的是React對該更新做出反應，並自動反映瀏覽器DOM中的更新(如果需要)。

將render函數輸入視為兩者

1. 從父元素得到props
2. 可以隨時更新的內部私有狀態

當渲染功能的輸入變化時，其輸出可能會改變。

React保留了渲染曆史的記錄，當它看到一個渲染與前一個渲染不同時，它將計算它們之間的差異，並將其有效地轉換為在DOM中執行的實際DOM操作。

9: React是你的代理

您可以將React視為我們聘請的與瀏覽器通信的代理。 以上麵的當前時間戳顯示為例。 我們不是手動去瀏覽器並調用DOM API操作來每秒查找和更新p#timestamp元素，而是在組件狀態上更改了一個屬性，而React代表我們與瀏覽器進行通信。 我相信這是真正受歡迎的真正原因。 我們討厭瀏覽器(和所說的DOM語言的很多方言)，React自願為我們做所有的談話，免費!

10: 每個React組件都有一個故事(第2部分)

現在我們知道一個組件的狀態，以及當這個狀態改變了一些魔法的時候，讓我們來學習關於該過程的最後幾個概念。

1. 組件可能需要在其狀態更新時重新呈現，或者當其父級決定更改傳遞給組件的props時，該組件可能需要重新呈現
2. 如果後者發生，React會調用另一個生命周期方法componentWillReceiveProps。
3. 如果狀態對象或傳入props被更改，則React有一個重要的決定。 組件應該在DOM中更新嗎? 這就是為什麼它在這裏調用另一個重要的生命周期方法，shouldComponentUpdate。 這個方法是一個實際的問題，所以如果你需要自己定製或優化渲染過程，你必須通過返回true或false來回答這個問題。
4. 如果沒有指定customComponentUpdate，React默認是一個非常聰明的事情，在大多數情況下實際上足夠好。
5. 首先，React在此時調用另一個生命周期方法componentWillUpdate。 然後React將計算新的渲染輸出並將其與最後渲染的輸出進行比較。
6. 如果渲染的輸出完全一樣，React什麼都不做。
7. 如果存在差異，則React會將這些差異映射到瀏覽器內。
8. 無論如何，由於更新過程無論如何(即使輸出完全相同)，React會調用最終的生命周期方法componentDidUpdate。

生命周期方法實際上是艙口。 如果你沒有做任何事情，你可以創建沒有他們的完整的應用程序。 他們可以用來非常方便地分析應用程序中發生的情況，並進一步優化了React更新的性能。

本文作者：碧青_Kwok

來源：51CTO

最後更新：2017-11-02 14:34:34

  上一篇：  【雲棲大會精華匯】2017杭州雲棲大會主論壇、分論壇在內的100+視頻分享

  下一篇：  如何輕鬆實現日誌可視化？—— 95後阿裏雲 MVP 王鵬翰也許給了一個答案