原文鏈接：tylermcginnis.com/reactjs-tut… by Tyler McGinnis

這篇文章最初發(fā)表于2015年1月，但最近被更新為React 16.3以及它所包含的所有優(yōu)點(diǎn)。

React.js基礎(chǔ)：

組件是React的構(gòu)建快。如果你擁有Angular背景，組件非常類似于Direactives.如果你來自于不同的背景，它們本質(zhì)上是小工具或者模塊。你可以認(rèn)為組件就是由HTML,CSS,JS和組件內(nèi)部一些特定的數(shù)據(jù)組成的集合。它們擁有著你需要的一切東西，被包裹在一個(gè)美妙的組合包中。這些組件要么用純JavaScript定義，要么可以在React團(tuán)隊(duì)所稱的“JSX”中定義。如果你決定使用JSX（你最愿意的方式，很標(biāo)準(zhǔn)的——也是我們將使用到的工具），你需要一些編譯工具將JSX轉(zhuǎn)換成JavaScript，我們之后再說這個(gè)。

React之所以能夠如此方便地構(gòu)建用戶界面，是因?yàn)閿?shù)據(jù)既可以來自組件的父組件，也能夠包含在組件本身中。在我們進(jìn)入到代碼之前，我們要確保對(duì)組件高度理解。

上圖是我Twitter賬戶的圖片。如果我們使用React重構(gòu)這個(gè)頁(yè)面，我們將把不同的部分拆分成不同的組件（敲黑板）。請(qǐng)注意，組件可以在其內(nèi)部嵌套組件。我們可以命名左邊的組件（粉紅框部分）為UserInfo組件。在UserInfo組件中有另一個(gè)組件（橙色塊），可以將其定義為UserImages組件。這中父/子關(guān)系的工作方式是：UserInfo組件(父組件)存放著其本身和UserImages組件（子組件）的“狀態(tài)”數(shù)據(jù)。如果我們想要在自組件中使用任何父級(jí)組件的數(shù)據(jù)，我們會(huì)將數(shù)據(jù)作為屬性傳遞給自組件。在這個(gè)例子中，我們傳遞所有用戶的圖片給UserImages組件（這些圖片都存放在UserInfo組件中）。我們將詳細(xì)的在代碼中討論，但是我希望你能夠明白上面?的圖片發(fā)生了些什么。這種父/子結(jié)構(gòu)使得我們管理數(shù)據(jù)的方式更加方便，因?yàn)槲覀儾恍枰_地知道我們的數(shù)據(jù)到底存放在哪的并且我們不應(yīng)該在其它地方操縱這些數(shù)據(jù)。

下面要討論的話題都是關(guān)于React基礎(chǔ)方面的東西。如果你了解它們以及它們的原理，閱讀完本教程后，你將更上一層樓。

JSX - 允許我們使用HTML語法類似的寫法，能夠被轉(zhuǎn)換成輕量級(jí)的JavaScript對(duì)象。Virtual DOM - 實(shí)際DOM的JavaScript表示。React.Component - 創(chuàng)建一個(gè)新組件的方式。render（方法）- 為特定的組件描述UI的樣子。ReactDOM.render = 將React組件渲染成DOM節(jié)點(diǎn)。state - 組件內(nèi)部的數(shù)據(jù)存儲(chǔ)（對(duì)象）。construtor (this.state) - 在組件中創(chuàng)建內(nèi)部狀態(tài)（state）的方式。setState - 組件內(nèi)部更新狀態(tài)（state）的工具方法并會(huì)重新渲染UI。props - 父組件中傳遞給子組件的數(shù)據(jù)。propTypes - 允許你控制傳遞給子組件的屬性（props）的存在或者類型。defaultProps - 允許你為自己的組件設(shè)置默認(rèn)的屬性（props）。Component LifeCycle（生命周期）- componentDidMount - 組件被掛載時(shí)執(zhí)行- componentWillUnmount - 組件注銷前執(zhí)行- getDerivedStateFromProps - 當(dāng)組件被掛載并且props發(fā)生變化時(shí)執(zhí)行。用于更新組件中的狀態(tài)（state）當(dāng)props改變時(shí)。Events- onClick- onSubmit- onChange... 復(fù)制代碼

我知道這看起來很多，但是你很快就會(huì)看到，在使用React構(gòu)建健壯應(yīng)用時(shí)，這每一個(gè)部分都是非常重要的（當(dāng)我說我希望這是一個(gè)全面的指南時(shí)，我也不是在開玩笑）。

在這一點(diǎn)上，你應(yīng)該高度理解React是如何工作的。現(xiàn)在，讓我們看一些代碼。

---

創(chuàng)建你的第一個(gè)組件（JSX，Virtual DOM，render，ReactDOM.render）

讓我們繼續(xù)創(chuàng)建我們的第一個(gè)組件吧！

為了創(chuàng)建React組件，你將使用到ES6中的類。

import React from 'react' import ReactDOM from 'react-dom'class HelloWorld extends React.Component {render() {return (<div>Hello World!</div>)} }ReactDOM.render(<HelloWorld />, document.getElementById('root')); 復(fù)制代碼

注意到我們的類中只有唯一的一個(gè)方法就是render。每個(gè)組件都需要有一個(gè)render方法。使用render方法的理由是它能描述組件的UI（user interface）。因此在這個(gè)例子中Hello world會(huì)被渲染出來展示在屏幕上。現(xiàn)在我們看看ReactDOM是做什么的。ReactDOM.render方法有兩個(gè)參數(shù)。第一個(gè)參數(shù)是你想要渲染的組件，第二個(gè)參數(shù)是你渲染組件的地方（哪個(gè)DOM 節(jié)點(diǎn)中）。（注意我們使用的是ReactDOM.render而不是React.render。這個(gè)改變出現(xiàn)在React.14中為了使React更加模塊化。當(dāng)你認(rèn)為React可以呈現(xiàn)比DOM元素更多的內(nèi)容時(shí)，這是有意義的）。在上面的例子中，我們告訴React獲取HelloWorld組件并在ID為root的元素中渲染。正如我們前面提到的React中的父/子關(guān)系，你通常只需要在應(yīng)用中用到一次ReactDOM.render方法，因?yàn)橥ㄟ^渲染最父級(jí)的組件，所有的自組件也都會(huì)被渲染。

此時(shí)你可能覺得在Javascript中寫“HTML”有些奇怪。在你開始學(xué)習(xí)web開發(fā)時(shí)，就有人告訴你應(yīng)該將邏輯層和視圖層分開，AKA也就是保持JavaScript與HTML的松耦合。這種模式很強(qiáng)大，但它也有一些缺點(diǎn)。由于篇幅原因，這里將不再詳述，你可以查看這篇文檔一探究竟。隨著你對(duì)React的了解越來越多，這種不安應(yīng)該會(huì)很快消退。在render方法中寫的“HTML”并不是真正的HTML而是React所稱的“JSX”。JSX允許我們很容易地編寫類似HTML的語法，這些語法(最終)被轉(zhuǎn)換為輕量級(jí)JavaScript對(duì)象。然后，React可以獲取這些JavaScript對(duì)象，并將其創(chuàng)建成“虛擬DOM”或?qū)嶋HDOM的JavaScript表示。這創(chuàng)建了雙贏的局面，你可以使用JavaScript的強(qiáng)大功能來訪問模板。

看看下面的例子，這就是你的JSX最終被編譯的樣子：

class HelloWorld extends React.Component {render() {return React.createElement('div', null, 'Hello world');}} 復(fù)制代碼

現(xiàn)在，您可以放棄JSX -> JS轉(zhuǎn)換階段，像上面的代碼一樣編寫您的React組件，但正如你所能想象的，這將是相當(dāng)棘手的。我不知道有誰沒有使用JSX。有關(guān)JSX編譯的更多信息，你可以查看React Elements vs React Components

到目前為止，我們還沒有真正強(qiáng)調(diào)我們將要進(jìn)入的這個(gè)新的虛擬DOM范式的重要性。React團(tuán)隊(duì)采用這種方法的原因是，因?yàn)樘摂MDOM是實(shí)際DOM的JavaScript表示，React能夠持續(xù)跟蹤當(dāng)前虛擬DOM（在一些數(shù)據(jù)更改之后計(jì)算）和前一個(gè)虛擬DOM（在一些數(shù)據(jù)更改之前計(jì)算）的不同。React將新舊虛擬DOM之間的變化隔離開來，然后只更新需要更改的實(shí)際DOM。。通常UI有許多狀態(tài)，這使得管理狀態(tài)變得困難。每次狀態(tài)改變都會(huì)重新渲染Virtual DOM, React讓你更容易思考應(yīng)用程序處于什么狀態(tài)。過程是這樣的：

一些用戶事件改變了應(yīng)用程序的狀態(tài) -> 重新渲染Virtual DOM -> 使用Diff算法計(jì)算出新Virtual DOM和前一個(gè)Virtual DOM間的差異 -> 只更新實(shí)際DOM中必要的變化

因?yàn)榇嬖趶腏SX到JS的轉(zhuǎn)換過程，所以在開發(fā)過程中需要設(shè)置某種類型的轉(zhuǎn)換階段。在本系列的第2部分中，我將介紹Webpack和Babel來進(jìn)行這種轉(zhuǎn)換。

讓我們回顧一下我們的“最重要的React的部分”清單，看看我們現(xiàn)在到哪兒了：

---

JSX - 允許我們使用HTML語法類似的寫法，能夠被轉(zhuǎn)換成輕量級(jí)的JavaScript對(duì)象。

Virtual DOM - 實(shí)際DOM的JavaScript表示。

React.Component - 創(chuàng)建一個(gè)新組件的方式。

render（方法）- 為特定的組件描述UI的樣子。

ReactDOM.render = 將React組件渲染成DOM節(jié)點(diǎn)。

state - 組件內(nèi)部的數(shù)據(jù)存儲(chǔ)（對(duì)象）。

construtor (this.state) - 在組件中創(chuàng)建內(nèi)部狀態(tài)（state）的方式。

setState - 組件內(nèi)部更新狀態(tài)（state）的工具方法并會(huì)重新渲染UI。

props - 父組件中傳遞給子組件的數(shù)據(jù)。

propTypes - 允許你控制傳遞給子組件的屬性（props）的存在或者類型。

defaultProps - 允許你為自己的組件設(shè)置默認(rèn)的屬性（props）。

Component LifeCycle（生命周期） - componentDidMount - 組件被掛載時(shí)執(zhí)行 - componentWillUnmount - 組件注銷前執(zhí)行 - getDerivedStateFromProps - 當(dāng)組件被掛載并且props發(fā)生變化時(shí)執(zhí)行。用于更新組件中的狀態(tài)（state）當(dāng)props改變時(shí)。

Events - onClick - onSubmit - onChange ...

---

我們的速度很快。所有粗體部分都是我們已經(jīng)介紹過了，你至少應(yīng)該能夠解釋這些特定組件如何適應(yīng)React生態(tài)系統(tǒng)了。

添加state到你的組件中

接下來是state。之前我們提到過管理用戶界面是困難的，因?yàn)樗麄兛偸怯写罅康臓顟B(tài)。這是React真正發(fā)光的地方。每個(gè)組件都有能力管理它們自己的狀態(tài)并且在需要的時(shí)候?qū)⑦@些狀態(tài)傳遞給他們的子組件。回到前面Twitter賬戶的例子，UserInfo組件（上面的粉紅塊）負(fù)責(zé)管理用戶信息狀態(tài)（或者數(shù)據(jù)）。如果另外一個(gè)組件也需要這個(gè)state/data，但那個(gè)狀態(tài)（state）不是UserInfo組件的直接子組件，然后你將創(chuàng)建另一個(gè)組件，它將是UserInfo和另一個(gè)組件(或兩個(gè)組件都需要該狀態(tài))的直接父組件，然后將狀態(tài)（state）作為屬性（props）傳遞到子組件中。換句話說，如果你有一個(gè)多組件層次結(jié)構(gòu)，那么公共父組件應(yīng)該管理狀態(tài)，并通過屬性（props）將其傳遞給其子組件。

讓我們看一個(gè)使用其內(nèi)部狀態(tài)的示例組件：

class HelloUser extends React.Component {constructor(props) {super(props)this.state = {username: 'tylermcginnis'}}render() {return (<div>Hello {this.state.username}</div>)} } 復(fù)制代碼

我們?cè)谶@個(gè)例子中引入了一些新的語法。第一個(gè)你注意到的是constructor方法。從上面的定義得知，constructor方法是組件中的狀態(tài)（state）定義的方式。換句話說，任何你在constructor中設(shè)置在this.state上的數(shù)據(jù)都會(huì)成為組件狀態(tài)（state）的一部分。在上面的代碼中我們告訴組件我們想要持續(xù)跟蹤username的狀態(tài)。username現(xiàn)在可以被使用通過調(diào)用this.state.username的方式，我們?cè)趓ender方法中確實(shí)是這樣做的。

關(guān)于state我們需要討論的最后一件事是，我們的組件需要有能力改變它自身內(nèi)部的狀態(tài)（state）。我們可以通過setState來做這件事。還記得我們前面我們提到過當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候都會(huì)出發(fā)re-rendering重新渲染virtual dom嗎？

通知我們的應(yīng)用程序一些數(shù)據(jù)發(fā)生了變化 -> 重新渲染virtual DOM -> 使用diff算法計(jì)算前一個(gè)virtual DOM和新virtual DOM之間的區(qū)別 -> 實(shí)際的DOM節(jié)點(diǎn)進(jìn)行必要的更新。

通過我們的應(yīng)用程序，數(shù)據(jù)發(fā)生了變化的信號(hào)就是setState。不論什么時(shí)候setState被調(diào)用，virtual DOM都會(huì)被重新渲染，diff算法會(huì)跑起來，并且實(shí)際的DOM也會(huì)進(jìn)行必要的更新。

作為旁注，當(dāng)我們?cè)谙旅娴拇a中介紹setState時(shí)，我們也會(huì)介紹一些清單中事件。一舉兩得！

因此在下面的例子中，我們將有一個(gè)輸入框，無論什么時(shí)候進(jìn)行輸入，它都會(huì)自動(dòng)更新我們的狀態(tài)（state）和改變username的值。

class HelloUser extends React.Component {construtor(props) {super(props)this.state = {username: 'tylermcginnis'}this.handleChange = this.handleChange.bind(this)}handleChange (e) {this.setState({username: e.target.value})}render() {return (<div>Hello {this.state.username} <br />Change Name:<inputtype="text"value={this.state.username}onChange={this.handleChange}/></div>)} } 復(fù)制代碼

注意到我們介紹了一些東西。第一個(gè)是handleChange方法。每當(dāng)用戶在輸入框中鍵入時(shí)，就會(huì)調(diào)用這個(gè)方法。當(dāng)handleChange被調(diào)用時(shí)，它會(huì)調(diào)用setState來重新定義我們的用戶名將其賦值為任何在輸入框中輸入的值(e.target.value)。記住，每次setState被調(diào)用時(shí)，React都會(huì)創(chuàng)建一個(gè)新的virtual DOM，執(zhí)行diff算法，并且更新實(shí)際的DOM節(jié)點(diǎn)。

現(xiàn)在來看一下我們的render方法。我們添加了一個(gè)包含輸入域的新行。它的類型顯然是text。這個(gè)值將是我們的用戶名（username）的值，它最初是在getInitialState方法中定義的，將在handleChange方法中更新。請(qǐng)注意，這里有一個(gè)你可能從未見過的新屬性，onChange。onChange是一個(gè)React事件，它會(huì)在每次輸入框中的值發(fā)生變化時(shí)調(diào)用你指定的任何方法，在這里我們指定的方法是handleChange。

上述代碼的處理過程大致是這樣的。

用戶在輸入框中鍵入 -> handleChange調(diào)用 -> 組件的狀態(tài)被設(shè)置為一個(gè)新值 -> React重新渲染虛擬DOM -> React執(zhí)行diff算法計(jì)算出差異 -> 實(shí)際DOM節(jié)點(diǎn)被更新。

之后我們會(huì)講到props，我們將看到一些更高級(jí)處理state的用例。

我們到這里了！如果你不能很好的解釋上面列舉條目中加粗的部分，你最好重讀一遍。真正學(xué)習(xí)React的一個(gè)技巧是，不要讓被動(dòng)的閱讀給你一種虛假的安全感，以為你知道發(fā)生了什么。你應(yīng)該在編輯器中創(chuàng)建自己的組件，而不只是看我做了些什么。這是你真正開始學(xué)習(xí)如何使用React的唯一方法。這適用于本教程和后續(xù)教程。

---

從父組件中接收狀態(tài)（props，propTypes，getDefaultProps）

我們已經(jīng)討論過幾次props了，因?yàn)闆]有它們真的很難做很多事情。前面的定義指出，props是父組件傳遞給子組件的數(shù)據(jù)。這允許我們的React體系結(jié)構(gòu)保持相當(dāng)直接的狀態(tài)。處理需要使用特定數(shù)據(jù)的頂級(jí)父組件中的狀態(tài)，如果你的子組件也需要該數(shù)據(jù)，則將該數(shù)據(jù)作為props傳遞下去。

這里有一個(gè)使用props非常簡(jiǎn)單的例子：

class HelloUser extends React.Component {render() {return (<div> Hello, {this.props.name}</div>)} }ReactDOM.render(<HelloUser name="Tyler"/>, document.getElementById('root')); 復(fù)制代碼

注意，在第9行，我們有一個(gè)名為name的屬性，其值為“Tyler”。現(xiàn)在在我們的組件中，我們可以使用{this.props.name}來獲取“Tyler”。

讓我們看一個(gè)更高級(jí)的例子。我們現(xiàn)在有兩個(gè)組件。一個(gè)parent，一個(gè)child。父組件將跟蹤狀態(tài)并將該狀態(tài)的一部分作為props傳遞給子進(jìn)程。讓我們首先看看父組件。

父組件

class FriendsContainer extends React.Component {constructor(props) {super(props)this.state = {name: 'Tyler McGinnis',friends: ['Jake Lingwall', 'Sarah Drasner', 'Merrick Christensen']}}render() {return (<div><h3> Name: {this.state.name} </h3><ShowList names={this.state.friends} /></div>)} } 復(fù)制代碼

在這個(gè)組件中，沒什么特別的：我們有一個(gè)初始狀態(tài)，我們將初始狀態(tài)的一部分傳遞給另一個(gè)組件。大多數(shù)新代碼將來自這個(gè)子組件，所以讓我們更仔細(xì)地研究一下。

子組件：

class ShowList extends React.Component {render() {return (<div><h3> Friends </h3><ul>{this.props.names.map((friend) => <li>{friend}</li>)}</ul></div>)} } 復(fù)制代碼

請(qǐng)記住，render方法返回的代碼是實(shí)際DOM的表示形式。如果你不熟悉Array.prototype.map，這段代碼看起來有點(diǎn)陌生。map所做的就是創(chuàng)建一個(gè)新數(shù)組，對(duì)數(shù)組中的每個(gè)項(xiàng)目調(diào)用回調(diào)函數(shù)，并將每個(gè)項(xiàng)目調(diào)用回調(diào)函數(shù)的結(jié)果填充到新數(shù)組中。例如，

const friends = ['Jake Lingwall', 'Sarah Drasner', 'Merrick Christensen']; const listItems = friends.map((friend) => {return "<li> " + friend + "</li>"; });console.log(listItems); // ["<li> Jake Lingwall</li>", "<li> Sarah Drasner</li>", "<li> Merrick Christensen</li>"]; 復(fù)制代碼

注意，我們創(chuàng)建了一個(gè)新數(shù)組，并將<li> </li>添加到原始數(shù)組中的每一項(xiàng)。

map的偉大之處在于它非常適合于React(JavaScript中的內(nèi)置方法)。因此，在上面的子組件中，我們映射名稱，將每個(gè)名稱包裝在一對(duì)<li>標(biāo)記中，并將其保存到listItems變量中。然后，我們的render方法返回一個(gè)無序列表，其中包含我們所有的朋友。

在我們停止討論props之前，讓我們?cè)倏匆粋€(gè)例子。重要的是要理解，無論數(shù)據(jù)位于何處，都是你希望操作這些數(shù)據(jù)的。這樣可以簡(jiǎn)化對(duì)數(shù)據(jù)的推理。對(duì)于特定數(shù)據(jù)塊的所有g(shù)etter/setter方法都將始終位于定義該數(shù)據(jù)的相同組件中。如果你需要在數(shù)據(jù)所在位置之外操作一些數(shù)據(jù)，可以將getter/setter方法作為props傳遞到該組件。讓我們看一個(gè)這樣的例子。

class FriendsContainer extends React.Component {construtor(props) {super(props)this.state = {name: 'Tyler McGinnis',friends: ['Jake Lingwall','Sarah Drasner','Merrick Christensen'],}this.addFriend = this.addFriend.bind(this)}addFriend(friend) {this.setState((state) => ({friends: state.friends.concat([friend])}))}render() {return (<div><h3> Name: {this.state.name} </h3><AddFriend addNew={this.addFriend} /><ShowList names={this.state.friends} /></div>)} } 復(fù)制代碼

?.注意，在addFriend方法中，我們引入了一種調(diào)用setState的新方法。我們不是傳遞一個(gè)對(duì)象，而是傳遞一個(gè)函數(shù)，然后這個(gè)函數(shù)傳遞狀態(tài)（state）。當(dāng)你根據(jù)以前的狀態(tài)設(shè)置組件的新狀態(tài)時(shí)(正如我們對(duì)friends數(shù)組所做的那樣)，你希望給setState傳遞一個(gè)函數(shù)，該函數(shù)接收當(dāng)前狀態(tài)（state）并返回?cái)?shù)據(jù)與新狀態(tài)進(jìn)行合并。

class AddFriend extends React.Component {construtor(props) {super(props)this.state = {newFriend: ''}this.updateNewFriend = this.updateNewFriend.bind(this)this.handleAddNew = this.handleAddNew.bind(this)}updateNewFriend(e) {this.setState({newFriend: e.target.value})}handleAddNew() {this.props.addNew(this.state.newFriend)this.setState({newFriend: ''})}render() {return (<div><inputtype="text"value={this.state.newFriend}onChange={this.updateNewFriend}/><button onClick={this.handleAddNew}> Add Friend </button></div>)} } 復(fù)制代碼class ShowList extends React.Component {render() {return (<div><h3> Friends </h3><ul>{this.props.names.map((friend) => {return <li> {friend} </li>})}</ul></div>)} } 復(fù)制代碼

你會(huì)注意到上面的代碼與前面的示例基本相同，只是現(xiàn)在我們能夠向好友列表中添加新名稱。注意我是如何創(chuàng)建一個(gè)新的AddFriend組件來管理我們將要添加的新朋友的。這是因?yàn)楦附M件(FriendContainer)并不關(guān)心你添加的新朋友，它只關(guān)心作為一個(gè)整體的所有朋友(朋友數(shù)組)。但是，因?yàn)槲覀儓?jiān)持只操作關(guān)心它的組件的數(shù)據(jù)的規(guī)則，所以我們已經(jīng)將addFriend方法作為一個(gè)props傳遞到addFriend組件中，并在handleAddNew方法被調(diào)用后與新朋友一起調(diào)用它。

在這一點(diǎn)上，我建議你在嘗試使用上面的代碼來重新創(chuàng)建相同的功能，你可能會(huì)被卡住3-4分鐘。

在我們繼續(xù)將props之前，我想再講兩個(gè)關(guān)于props的React特性。它們是propTypes和defaultProps。這里我不多講，因?yàn)檫@兩者都很直接。proptype允許你控制展示，或者傳遞給子組件的某些props的類型。使用propTypes，你可以指定特定的props是否是必需的，或者特定props的類型。

從React 15開始，PropTypes不再包含在React包中。你需要通過運(yùn)行npm install prop-types來單獨(dú)安裝它。

defaultProps允許為某些props指定默認(rèn)(或備份)值，以防這些props從未傳遞到組件中。

我使用propTypes修改了我們的組件，要求addFriend是一個(gè)函數(shù)，并將其傳遞給AddFriend組件。我還使用了defaultProps，如果沒有向ShowList組件提供朋友數(shù)組，它將默認(rèn)為空數(shù)組。

import React from 'react' import PropTypes from 'prop-types'class AddFriend extends React.Component {constructor(props) {super(props)this.state = {newFriend: ''}}updateNewFriend(e) {this.setState({newFriend: e.target.value})}handleAddNew() {this.props.addNew(this.state.newFriend)this.setState({newFriend: ''})}render() {return (<div><input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} /><button onClick={this.handleAddNew}> Add Friend </button></div>)} }AddFriend.propTypes: {addNew: PropTypes.func.isRequired } 復(fù)制代碼class ShowList extends React.Component {render() {return (<div><h3> Friends </h3><ul>{this.props.names.map((friend) => {return <li> {friend} </li>})}</ul></div>)} }ShowList.defaultProps = {names: [] } 復(fù)制代碼

好了，這是此教程的最后一部分。讓我們看一下檢查一下清單，看看還剩下什么。

Component LifeCycle- componentDidMount — Fired after the component mounted- componentWillUnmount — Fired before the component will unmount- getDerivedStateFromProps - Fired when the component mounts and whenever the props change. Used to update the state of a component when its props change 復(fù)制代碼

就快完了！

組件生命周期

你創(chuàng)建的每個(gè)組件都有自己的生命周期事件，這些事件是有用的。例如，如果我們想在第一次渲染時(shí)發(fā)出ajax請(qǐng)求并獲取一些數(shù)據(jù)，我們應(yīng)該在哪里做呢?或者，如果我們想在props改變的時(shí)候處理一些業(yè)務(wù)邏輯，我們又該怎么做呢?不同的生命周期事件是這兩個(gè)問題的答案。讓我們把它們分解。

class App extends React.Component {constructor(props) {super(props)this.state = {name: 'Tyler McGinnis'}}componentDidMount(){// 當(dāng)DOM節(jié)點(diǎn)被掛載的時(shí)候執(zhí)行一次// 有益于發(fā)送AJAX請(qǐng)求}static getDerivedStateFromProps(nextProps, prevState) {// 這個(gè)函數(shù)返回的對(duì)象將被整合到當(dāng)前的state中}componentWillUnmount(){// 在組件被卸載之前立即執(zhí)行// 有助于清理一些監(jiān)聽器（listeners）}render() {return (<div>Hello, {this.state.name}</div>)} } 復(fù)制代碼

componentDidMount - 在初始渲染（render）之后調(diào)用一次。因?yàn)樵谡{(diào)用此方法時(shí)組件已經(jīng)被調(diào)用，所以如果有需要，你可以訪問虛擬DOM,通過調(diào)用this.getDOMNode()來實(shí)現(xiàn)。這是一個(gè)生命周期事件，在這個(gè)事件中，你可以發(fā)出AJAX請(qǐng)求以獲取一些數(shù)據(jù)。

componentWillUnmount - 在從DOM卸載組件之前，將立即調(diào)用此生命周期方法。這是你可以做必要清理的地方。

getDerivedStateFromProps - 有時(shí)你需要根據(jù)傳遞進(jìn)來的props更新組件的狀態(tài)（state）。這是生命周期方法，你可以這樣做。它將傳遞props和state，返回的對(duì)象將與當(dāng)前state合并。

如果你能堅(jiān)持到現(xiàn)在，做得很好。我希望本教程對(duì)你有所幫助，并且你現(xiàn)在至少對(duì)React感覺還算滿意。

為了更深入地了解React的基本原理，看看我們的React基礎(chǔ)課程。或者查看官方教程

轉(zhuǎn)載于:https://juejin.im/post/5c107708e51d4511624d151b

總結(jié)

以上是生活随笔為你收集整理的【译】一份通俗易懂的React.js基础指南-2018的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。