最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

例 7：一個 React 元素是一個可以通過 {} 使用的表達式

上述 MaybeError 組件只會在有 errorMessage 傳入或者另外有一個空的 div 才會顯示 ErrorDisplay 組件。React 認為 {true}、 {false}

{undefined} 和 {null} 是有效元素，不呈現(xiàn)任何內(nèi)容。

我們也可以在 JSX 中使用所有的 JavaScript 的集合方法（map、reduce 、filter、 concat 等）。因為他們返回的也是表達式：

const?Doubler?=?({value=[1,?2,?3]})?=>?

?{value.map(e?=>?e?*?2)}
?
;
//?使用下面內(nèi)容?
ReactDOM.render(,?mountNode);復制代碼

例 8：在 {} 中使用數(shù)組

請注意我是如何給出上述 value 屬性的默認值的，因為這全部都只是 JavaScript。注意我只是在 div 中輸出一個數(shù)組表達式。React 是完全可以的。它只會在文本節(jié)點中放置每一個加倍的值。

4 你可以使用 JavaScript 類寫 React 組件

簡單的函數(shù)組件非常適合簡單的需求，但是有的時候我們需要的更多。React 也支持通過使用 JavaScript 類來創(chuàng)建組件。這里 Button 組件（在例 1 中）就是使用類的語法編寫的。

class?Button?extends?React.Component?{
?render()?{?return?{this.props.label};
?}
}//?使用（相同的語法）ReactDOM.render(,?mountNode);復制代碼

例 9：使用 JavaScript 類創(chuàng)建組件

類的語法是非常簡單的：定義一個擴展的 React.Component 類（另一個你需要學習的 React 的頂級 API）。該類定義了一個單一的實例函數(shù) —— render()，并使函數(shù)返回虛擬 DOM 對象。每一次我們使用基于類的 Button 組件（例如，通過 ）,React 將從這個基于類的組件中實例化對象，并在 DOM 樹中使用該對象。

這就是為什么上面的例子中我們可以在 JSX 中使用 this.props.label 渲染輸出的原因，因為每一個組件都有一個特殊的稱為 props 的?實例?屬性，這讓所有的值傳遞給該組件時被實例化。

由于我們有一個與組件的單個使用相關(guān)聯(lián)的實例，所以我們可以按照自己的意愿定制該實例。例如，我們可以通過使用常規(guī) JavaScript 構(gòu)造函數(shù)來構(gòu)造它：

class?Button?extends?React.Component?{
?constructor(props)?{?super(props);?this.id?=?Date.now();
?}
?render()?{?return?{this.props.label}

; ?} }//?使用ReactDOM.render(,?mountNode);復制代碼

例 10：自定義組件實例

我們也可以定義類的原型并且在任何我們希望的地方使用，包括在返回的 JSX 輸出的內(nèi)部：

class?Button?extends?React.Component?{
?clickCounter?=?0;
?handleClick?=?()?=>?{
?console.log(`Clicked:?${++this.clickCounter}`);
?};
?render()?{?return?(
?
?{this.props.label}
?
?);
?}
}//?使用ReactDOM.render(,?mountNode);復制代碼

例 11：使用類的屬性（通過單擊保存按鈕進行測試）

注意上述例 11 中的幾件事情

• handleClick 函數(shù)使用 JavaScript 新提出的 class-field syntax 語法。這仍然是 stage-2，但是這是訪問組件安裝實例（感謝箭頭函數(shù)）最好的選擇（因為很多原因）。然而，你需要使用類似 Babel 的編譯器解碼為 stage-2（或者僅僅是類字段語法）來讓上述代碼工作。 jsComplete REPL 有預編譯功能。

//?錯誤：onClick={this.handleClick()}//?正確：onClick={this.handleClick}復制代碼

5 React 中的事件：兩個重要的區(qū)別

當處理 React 元素中的事件時，我們與 DOM API 的處理方式有兩個非常重要的區(qū)別：

• 所有 React 元素屬性（包括事件）都使用?camelCase?命名，而不是?lowercase。例如是 onClick 而不是 onclick。

• 我們將實際的 JavaScript 函數(shù)引用傳遞給事件處理程序，而不是字符串。例如是 onClick={handleClick} 而不是 onClick="handleClick"。

React 用自己的對象包裝 DOM 對象事件以優(yōu)化事件處理的性能，但是在事件處理程序內(nèi)部，我們?nèi)匀豢梢栽L問 DOM 對象上所有可以訪問的方法。React 將經(jīng)過包裝的事件對象傳遞給每個調(diào)用函數(shù)。例如，為了防止表單提交默認提交操作，你可以這樣做：

class?Form?extends?React.Component?{
?handleSubmit?=?(event)?=>?{
?event.preventDefault();
?console.log('Form?submitted');
?};
?render()?{?return?(
?
?Submit
?
?);
?}
}//?使用ReactDOM.render(,?mountNode);復制代碼

例 12：使用包裝過的對象

6 每一個 React 組件都有一個故事：第 1 部分

以下僅適用于類組件（擴展 React.Component）。函數(shù)組件有一個稍微不同的故事。

1. 首先，我們定義了一個模板來創(chuàng)建組件中的元素。

2. 然后，我們在某處使用 React。例如，在 render 內(nèi)部調(diào)用其他的組件，或者直接使用 ReactDOM.render。

3. 然后，React 實例化一個對象然后給它設(shè)置?props?然后我們可以通過 this.props 訪問。這些屬性都是我們在第 2 步傳入的。

4. 因為這些全部都是 JavaScript，constructor 方法將會被調(diào)用（如果定義的話）。這是我們稱之為的第一個：組件生命周期方法。

5. 接下來 React 計算渲染之后的輸出方法（虛擬 DOM 節(jié)點）。

6. 因為這是 React 第一次渲染元素，React 將會與瀏覽器連通（代表我們使用 DOM API）來顯示元素。這整個過程稱為?mounting。

7. 接下來 React 調(diào)用另一個生命周期函數(shù)，稱為 componentDidMount。我們可以這樣使用這個方法，例如：在 DOM 上做一些我們現(xiàn)在知道的在瀏覽器中存在的東西。在此生命周期方法之前，我們使用的 DOM 都是虛擬的。

8. 一些組件的故事到此結(jié)束，其他組件得到卸載瀏覽器 DOM 中的各種原因。在后一種情況發(fā)生時，會調(diào)用另一個生命周期的方法，componentWillUnmount。

9. 任何 mounted 的元素的狀態(tài)都可能會改變。該元素的父級可能會重新渲染。無論哪種情況，mounted 的元素都可能接收到不同的屬性集。React 的魔力就是這兒，我們實際上需要的正是 React 的這一點！在這一點之前，說實話，我們并不需要 React。

10. 組價的故事還在繼續(xù)，但是在此之前，我們需要理解我所說的這種狀態(tài)。

7 React 組件可以具有私有狀態(tài)

以下只適用于類組件。我有沒有提到有人叫表象而已的部件?dumb？

狀態(tài)類是任何 React 類組件中的一個特殊字段。React 檢測每一個組件狀態(tài)的變化，但是為了 React 更加有效，我們必須通過 React 的另一個 API 改變狀態(tài)字段，這就是我們要學習的另一個 API —— this.setState：

class?CounterButton?extends?React.Component?{
?state?=?{?clickCounter:?0,?currentTimestamp:?new?Date(),
?};
?handleClick?=?()?=>?{?this.setState((prevState)?=>?{?return?{?clickCounter:?prevState.clickCounter?+?1?};
?});
?};
?componentDidMount()?{
?setInterval(()?=>?{?this.setState({?currentTimestamp:?new?Date()?})
?},?1000);
?}
?render()?{?return?(?

?Click
?
Clicked:?{this.state.clickCounter}
?
Time:?{this.state.currentTimestamp.toLocaleString()}
?
?);
?}
}//?使用ReactDOM.render(,?mountNode);復制代碼

例 13：setState 的 API

這可能是最重要的一個例子因為這將是你完全理解 React 基礎(chǔ)知識的方式。這個例子之后，還有一些小事情需要學習，但從那時起主要是你和你的 JavaScript 技能。

讓我們來看一下例 13，從類開始，總共有兩個，一個是一個初始化的有初始值為 0 的 clickCounter 對象和一個從 new Date() 開始的 currentTimestamp。

另一個類是 handleClick 函數(shù)，在渲染方法中我們給按鈕元素傳入 onClick 事件。通過使用 setState 的 handleClick 方法修改了組件的實例狀態(tài)。要注意到這一點。

另一個我們修改狀態(tài)的地方是在一個內(nèi)部的定時器，開始在內(nèi)部的 componentDidMount 生命周期方法。它每秒鐘調(diào)用一次并且執(zhí)行另一個函數(shù)調(diào)用 this.setState。

在渲染方法中，我們使用具有正常讀語法的狀態(tài)上的兩個屬性（沒有專門的 API）。

現(xiàn)在，注意我們更新狀態(tài)使用兩種不同的方式：

1. 通過傳入一個函數(shù)然后返回一個對象。我們在 handleClick 函數(shù)內(nèi)部這樣做。

2. 通過傳入一個正則對象，我們在在區(qū)間回調(diào)中這樣做。

這兩種方式都是可以接受的，但是當你同時讀寫狀態(tài)時，第一種方法是選的（我們這樣做）。在區(qū)間回調(diào)中，我們只向狀態(tài)寫入而不讀它。當有問題時，總是使用第一個函數(shù)作為參數(shù)語法。伴隨著競爭條件這更安全，因為 setstate 實際上是一個異步方法。

我們應(yīng)該怎樣更新狀態(tài)呢？我們返回一個有我們想要更新的的值的對象。注意，在調(diào)用 setState 時，我們?nèi)慷紡臓顟B(tài)中傳入一個屬性或者全都不。這完全是可以的因為 setState 實際上?合并?了你通過它（返回值的函數(shù)參數(shù)）與現(xiàn)有的狀態(tài)，所以，沒有指定一個屬性在調(diào)用 setState 時意味著我們不希望改變屬性（但不刪除它）。

8 React 將要反應(yīng)

React 的名字是從狀態(tài)改變的反應(yīng)中得來的（雖然沒有反應(yīng)，但也是在一個時間表中）。這里有一個笑話，React 應(yīng)該被命名為Schedule！

然而，當任何組件的狀態(tài)被更新時，我們用肉眼觀察到的是對該更新的反應(yīng)，并自動反映了瀏覽器 DOM 中的更新（如果需要的話）。

將渲染函數(shù)的輸入視為兩種：

• 通過父元素傳入的屬性

• 以及可以隨時更新的內(nèi)部私有狀態(tài)

當渲染函數(shù)的輸入改變時，輸出可能也會改變。

React 保存了渲染的歷史記錄，當它看到一個渲染與前一個不同時，它將計算它們之間的差異，并將其有效地轉(zhuǎn)換為在 DOM 中執(zhí)行的實際 DOM 操作。

9 React 是你的代碼

您可以將 React 看作是我們用來與瀏覽器通信的代理。以上面的當前時間戳顯示為例。取代每一秒我們都需要手動去瀏覽器調(diào)用 DOM API 操作來查找和更新 p#timestamp 元素，我們僅僅改變組件的狀態(tài)屬性，React 做的工作代表我們與瀏覽器的通信。我相信這就是為什么 React 這么受歡迎的真正原因；我們只是不喜歡和瀏覽器先生談話（以及它所說的 DOM 語言的很多方言），并且 React 自愿傳遞給我們，免費的！

10 每一個 React 組件都有一個故事：第 2 部分

現(xiàn)在我們知道了一個組件的狀態(tài)，當該狀態(tài)發(fā)生變化的時候，我們來了解一下關(guān)于這個過程的最后幾個概念。

1. 當組件的狀態(tài)被更新時，或者它的父進程決定更改它傳遞給組件的屬性時，組件可能需要重新渲染。

2. 如果后者發(fā)生，React 會調(diào)用另一個生命周期方法：componentWillReceiveProps。

3. 如果狀態(tài)對象或傳遞的屬性改變了，React 有一個重要的決定要做：組件是否應(yīng)該在 DOM 中更新？這就是為什么它調(diào)用另一個重要的生命周期方法 shouldComponentUpdate 的原因 。此方法是一個實際問題，因此，如果需要自行定制或優(yōu)化渲染過程，則必須通過返回 true 或 false 來回答這個問題。

4. 如果沒有自定義 shouldComponentUpdate，React 的默認事件在大多數(shù)情況下都能處理的很好。

5. 首先，這個時候會調(diào)用另一生命周期的方法：componentWillUpdate。然后，React 將計算新渲染過的輸出，并將其與最后渲染的輸出進行對比。

6. 如果渲染過的輸出和之前的相同，React 不進行處理（不需要和瀏覽器先生對話）。

7. 如果有不同的地方，React 將不同傳達給瀏覽器，像我們之前看到的那樣。

8. 在任何情況下，一旦一個更新程序發(fā)生了，無論以何種方式（即使有相同的輸出），React 會調(diào)用最后的生命周期方法：componentDidUpdate。

生命周期方法是逃生艙口。如果你沒有做什么特別的事情，你可以在沒有它們的情況下創(chuàng)建完整的應(yīng)用程序。它們非常方便地分析應(yīng)用程序中正在發(fā)生的事情，并進一步優(yōu)化 React 更新的性能。

感謝閱讀。如果您覺得這篇文章有幫助，請點擊下面的 。請關(guān)注我的更多關(guān)于 React.js 和 JavaScript 的文章。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。