【译】一份通俗易懂的React.js基础指南-2018
原文鏈接: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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 最新阿里内推Java后端面试题
- 下一篇: JVM规范系列第2章:Java虚拟机结构