組件讓你可以將用戶界面分成獨(dú)立的，可重復(fù)使用的部分，并且可以獨(dú)立思考每一部分。React.Component由...提供React。

概觀

React.Component是一個(gè)抽象的基類，因此React.Component直接引用它很少有意義。相反，您通常會(huì)對(duì)其進(jìn)行子類化，并至少定義一種render()方法。

通常你會(huì)將一個(gè)React組件定義為一個(gè)普通的JavaScript類：

class Greeting extends React.Component {  render() {    return <h1>Hello, {this.props.name}</h1>;  }}

如果您還沒有使用ES6，則可以使用該create-react-class模塊?？纯词褂脹]有ES6的React來了解更多。

請(qǐng)注意，我們不建議創(chuàng)建您自己的基礎(chǔ)組件類。代碼重用主要是通過React中的組合而不是繼承來實(shí)現(xiàn)的?？纯催@些常見的場(chǎng)景，感受一下如何使用構(gòu)圖。

組件生命周期

每個(gè)組件都有幾個(gè)“生命周期方法”，您可以重寫以在該進(jìn)程中的特定時(shí)間運(yùn)行代碼。will在事件發(fā)生之前調(diào)用帶有前綴的方法，并且did在事件發(fā)生之后調(diào)用帶有前綴的方法。

安裝

當(dāng)創(chuàng)建一個(gè)組件的實(shí)例并將其插入到DOM中時(shí)，將調(diào)用這些方法：

• constructor()

• componentWillMount()

• render()

• componentDidMount()

更新

更新可能由道具或狀態(tài)的更改引起。當(dāng)一個(gè)組件被重新渲染時(shí)，這些方法被調(diào)用：

• componentWillReceiveProps()

• shouldComponentUpdate()

• componentWillUpdate()

• render()

• componentDidUpdate()

卸載

從DOM中刪除組件時(shí)調(diào)用此方法：

• componentWillUnmount()

錯(cuò)誤處理

在渲染期間，生命周期方法或任何子組件的構(gòu)造函數(shù)中發(fā)生錯(cuò)誤時(shí)調(diào)用此方法。

• componentDidCatch()

其他API

每個(gè)組件還提供一些其他API：

• setState()

• forceUpdate()

類屬性

• defaultProps

• displayName

實(shí)例屬性

• props

• state

參考

render()

render()

render()方法是必需的。

被調(diào)用時(shí)，它應(yīng)該檢查this.props并this.state返回以下類型之一：

• React元素。通常通過JSX創(chuàng)建。元素可以是本地DOM組件（<div />）的表示，也可以是用戶定義的組合組件（<MyComponent />）。

• 字符串和數(shù)字。這些呈現(xiàn)為DOM中的文本節(jié)點(diǎn)。

• 門戶網(wǎng)站。創(chuàng)建于ReactDOM.createPortal。

• null。不渲染任何東西。

• 布爾人。什么都不渲染。（主要存在支持return test && <Child />模式，其中test是布爾值。）

當(dāng)返回null或false，ReactDOM.findDOMNode(this)將返回null。

該render()函數(shù)應(yīng)該是純粹的，這意味著它不會(huì)修改組件狀態(tài)，它每次調(diào)用時(shí)都返回相同的結(jié)果，并且它不直接與瀏覽器交互。如果您需要與瀏覽器交互，請(qǐng)componentDidMount()改為使用其他生命周期方法。保持render()純粹使組件更易于思考。

render()如果shouldComponentUpdate()返回false，則不會(huì)調(diào)用注釋   。

片段

您也可以render()使用數(shù)組返回多個(gè)項(xiàng)目：

render() {  return [    <li key="A">First item</li>,    <li key="B">Second item</li>,    <li key="C">Third item</li>,  ];}

注意：不要忘記將鍵添加到片段中的元素以避免重要警告。

constructor()

constructor(props)

React組件的構(gòu)造函數(shù)在掛載之前被調(diào)用。在實(shí)現(xiàn)React.Component子類的構(gòu)造函數(shù)時(shí)，您應(yīng)該super(props)在任何其他語句之前調(diào)用。否則，this.props將在構(gòu)造函數(shù)中定義，這可能會(huì)導(dǎo)致錯(cuò)誤。

避免在構(gòu)造函數(shù)中引入任何副作用或訂閱。對(duì)于這些用例，請(qǐng)componentDidMount()改為使用。

構(gòu)造函數(shù)是初始化狀態(tài)的正確位置。為此，只需分配一個(gè)對(duì)象this.state; 不要嘗試setState()從構(gòu)造函數(shù)中調(diào)用。構(gòu)造函數(shù)也經(jīng)常用于將事件處理程序綁定到類實(shí)例。

如果您沒有初始化狀態(tài)并且沒有綁定方法，則不需要為您的React組件實(shí)現(xiàn)構(gòu)造函數(shù)。

在極少數(shù)情況下，可以根據(jù)道具初始化狀態(tài)。這有效地“分叉”道具，并用最初的道具設(shè)置狀態(tài)。下面是一個(gè)有效的React.Component子類構(gòu)造函數(shù)的例子：

constructor(props) {  super(props);  this.state = {
    color: props.initialColor  };}

注意這種模式，因?yàn)閲也粫?huì)更新任何道具。不是將道具同步到狀態(tài)，而是經(jīng)常想要提升狀態(tài)。

如果你通過將它們用于狀態(tài)來“分叉”道具，那么你可能還想實(shí)施componentWillReceiveProps(nextProps)以保持狀態(tài)與它們保持同步。但提升狀態(tài)通常更容易，并且更少出現(xiàn)錯(cuò)誤。

componentWillMount()

componentWillMount()

componentWillMount()在安裝發(fā)生之前立即被調(diào)用。它之前被調(diào)用render()，因此setState()在此方法中同步調(diào)用不會(huì)觸發(fā)額外的渲染。一般來說，我們建議使用constructor()。

避免在此方法中引入任何副作用或訂閱。對(duì)于這些用例，請(qǐng)componentDidMount()改為使用。

這是在服務(wù)器渲染上調(diào)用的唯一生命周期鉤子。

componentDidMount()

componentDidMount()

componentDidMount()在組件被安裝后立即被調(diào)用。需要DOM節(jié)點(diǎn)的初始化應(yīng)該放在這里。如果您需要從遠(yuǎn)程端點(diǎn)加載數(shù)據(jù)，則這是一個(gè)實(shí)例化網(wǎng)絡(luò)請(qǐng)求的好地方。

此方法是設(shè)置任何訂閱的好地方。如果你這樣做，不要忘記退訂componentWillUnmount()。

調(diào)用setState()此方法將觸發(fā)額外的渲染，但在瀏覽器更新屏幕之前會(huì)發(fā)生。這保證即使render()在這種情況下將被調(diào)用兩次，用戶也不會(huì)看到中間狀態(tài)。請(qǐng)謹(jǐn)慎使用此模式，因?yàn)樗?jīng)常會(huì)導(dǎo)致性能問題。然而，當(dāng)你需要在渲染依賴于它的大小或位置的東西之前測(cè)量DOM節(jié)點(diǎn)時(shí)，它可能需要類似于模態(tài)和工具提示的情況。

componentWillReceiveProps()

componentWillReceiveProps(nextProps)

componentWillReceiveProps()在掛載組件接收新道具之前被調(diào)用。如果您需要在響應(yīng)更新狀態(tài)托變化（例如，復(fù)位），你可以比較this.props和nextProps和執(zhí)行使用狀態(tài)轉(zhuǎn)換this.setState()在此方法。

請(qǐng)注意，即使道具尚未更改，React也可能會(huì)調(diào)用此方法，因此如果您只想處理更改，請(qǐng)確保比較當(dāng)前值和下一個(gè)值。當(dāng)父組件重新呈現(xiàn)組件時(shí)，可能會(huì)發(fā)生這種情況。

componentWillReceiveProps()在安裝過程中，React不會(huì)使用初始道具進(jìn)行調(diào)用。如果組件的一些道具可能更新，它只會(huì)調(diào)用這個(gè)方法。調(diào)用this.setState()通常不會(huì)觸發(fā)componentWillReceiveProps()。

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

使用shouldComponentUpdate()讓陣營知道，如果一個(gè)組件的輸出不會(huì)受到州或道具的電流變化。默認(rèn)行為是在每次狀態(tài)更改時(shí)重新呈現(xiàn)，在絕大多數(shù)情況下，您應(yīng)該依賴默認(rèn)行為。

shouldComponentUpdate()在接收新道具或狀態(tài)時(shí)在渲染前被調(diào)用。默認(rèn)為true。此方法不用于初始渲染或何時(shí)forceUpdate()使用。

返回false不會(huì)阻止子組件在其狀態(tài)更改時(shí)重新呈現(xiàn)。

目前，如果shouldComponentUpdate()回報(bào)false，然后componentWillUpdate()，render()和componentDidUpdate()將不會(huì)被調(diào)用。請(qǐng)注意，將來React可能會(huì)被shouldComponentUpdate()視為提示而不是嚴(yán)格的指令，并且返回false可能仍會(huì)導(dǎo)致組件的重新呈現(xiàn)。

如果在分析后確定某個(gè)特定組件速度較慢，則可以將其更改為從具有較淺屬性和狀態(tài)比較的React.PureComponent哪些實(shí)現(xiàn)繼承shouldComponentUpdate()。如果你有信心，你想手工地寫出來，你可以比較this.props與nextProps和this.state使用nextState，并返回false來告訴陣營的更新可以跳過。

我們不建議進(jìn)行深度平等檢查或使用JSON.stringify()英寸shouldComponentUpdate()。這是非常低效的，會(huì)損害性能。

componentWillUpdate()

componentWillUpdate(nextProps, nextState)

componentWillUpdate()在接收新道具或狀態(tài)時(shí)立即被調(diào)用。使用此作為更新發(fā)生之前執(zhí)行準(zhǔn)備的機(jī)會(huì)。此方法不用于初始渲染。

請(qǐng)注意，你不能this.setState()在這里打電話; 你也不應(yīng)該做任何其他事情（比如派遣一個(gè)Redux動(dòng)作），它會(huì)在componentWillUpdate()返回之前觸發(fā)一個(gè)React組件的更新。

如果您需要更新state以響應(yīng)props更改，請(qǐng)componentWillReceiveProps()改用它。

componentWillUpdate()如果shouldComponentUpdate()返回false，則不會(huì)調(diào)用注釋   。

componentDidUpdate()

componentDidUpdate(prevProps, prevState)

componentDidUpdate()在更新發(fā)生后立即調(diào)用。此方法不用于初始渲染。

在更新組件時(shí)，將此用作在DOM上操作的機(jī)會(huì)。只要您將當(dāng)前的道具與以前的道具進(jìn)行比較（例如，如果道具沒有改變，則可能不需要網(wǎng)絡(luò)請(qǐng)求），這也是做網(wǎng)絡(luò)請(qǐng)求的好地方。

componentDidUpdate()如果shouldComponentUpdate()返回false，則不會(huì)調(diào)用注釋   。

componentWillUnmount()

componentWillUnmount()

componentWillUnmount()在組件被卸載并銷毀之前立即被調(diào)用。在此方法中執(zhí)行任何必要的清理操作，例如使定時(shí)器失效，取消網(wǎng)絡(luò)請(qǐng)求或清理在其中創(chuàng)建的任何訂閱componentDidMount()。

componentDidCatch()

componentDidCatch(error, info)

錯(cuò)誤邊界是React組件，可以在其子組件樹中的任何位置捕獲JavaScript錯(cuò)誤，記錄這些錯(cuò)誤并顯示回退UI，而不是崩潰的組件樹。錯(cuò)誤邊界在渲染期間，生命周期方法以及整個(gè)樹下的構(gòu)造函數(shù)中捕獲錯(cuò)誤。

如果類組件定義了此生命周期方法，則它將成為錯(cuò)誤邊界。調(diào)用setState()它可以讓您在下面的樹中捕獲未處理的JavaScript錯(cuò)誤并顯示回退UI。只能使用錯(cuò)誤邊界從意外異常中恢復(fù); 不要試圖將它們用于控制流程。

有關(guān)更多詳細(xì)信息，請(qǐng)參閱React 16中的錯(cuò)誤處理。

注意錯(cuò)誤邊界只會(huì)捕獲樹中下面組件中的錯(cuò)誤。錯(cuò)誤邊界本身不能捕獲錯(cuò)誤。

setState()

setState(updater[, callback])

setState()將更改排入組件狀態(tài)，并告訴React該組件及其子組件需要使用更新的狀態(tài)重新呈現(xiàn)。這是您用來更新用戶界面以響應(yīng)事件處理程序和服務(wù)器響應(yīng)的主要方法。

將其setState()看作是一個(gè)請(qǐng)求，而不是一個(gè)立即的命令來更新組件。為了獲得更好的感知性能，React可能會(huì)延遲它，然后一次更新幾個(gè)組件。React不保證立即應(yīng)用狀態(tài)更改。

setState()并不總是立即更新組件。它可能會(huì)批處理或推遲更新，直到稍后。這可以this.state在調(diào)用setState()潛在的陷阱之后立即閱讀。相反，使用componentDidUpdate或setState回調(diào)（setState(updater, callback)），其中任何一個(gè)保證在應(yīng)用更新后觸發(fā)。如果您需要根據(jù)以前的狀態(tài)設(shè)置狀態(tài)，請(qǐng)閱讀updater下面的參數(shù)。

setState()將永遠(yuǎn)導(dǎo)致重新呈現(xiàn)，除非shouldComponentUpdate()得到回報(bào)false。如果正在使用可變對(duì)象并且無法實(shí)現(xiàn)條件呈現(xiàn)邏輯shouldComponentUpdate()，則setState()僅在新狀態(tài)與先前狀態(tài)不同時(shí)調(diào)用才能避免不必要的重新呈現(xiàn)。

第一個(gè)參數(shù)是updater帶簽名的函數(shù)：

(prevState, props) => stateChange

prevState是對(duì)之前狀態(tài)的參考。它不應(yīng)該直接變異。相反，應(yīng)通過基于來自prevState和的輸入構(gòu)建新對(duì)象來表示更改props。例如，假設(shè)我們想通過以下方式增加一個(gè)狀態(tài)值props.step：

this.setState((prevState, props) => {  return {counter: prevState.counter + props.step};});

二者prevState并props通過更新功能接收保證是向上的更新。更新器的輸出與淺層合并prevState。

第二個(gè)參數(shù)setState()是一個(gè)可執(zhí)行的回調(diào)函數(shù)，將被執(zhí)行一次setState完成并且組件被重新渲染。通常我們推薦使用componentDidUpdate()這種邏輯代替。

你可以選擇傳遞一個(gè)對(duì)象作為第一個(gè)參數(shù)來setState()代替函數(shù)：

setState(stateChange[, callback])

這會(huì)執(zhí)行stateChange到新狀態(tài)的淺層合并，例如調(diào)整購物車項(xiàng)目數(shù)量：

this.setState({quantity: 2})

這種形式setState()也是異步的，并且在同一個(gè)周期內(nèi)的多個(gè)調(diào)用可以一起進(jìn)行批處理。例如，如果您嘗試在同一周期內(nèi)多次增加物料數(shù)量，則會(huì)導(dǎo)致等同于：

Object.assign(
  previousState,  {quantity: state.quantity + 1},  {quantity: state.quantity + 1},  ...)

隨后的調(diào)用將覆蓋同一周期內(nèi)先前調(diào)用的值，因此數(shù)量只會(huì)增加一次。如果下一個(gè)狀態(tài)取決于之前的狀態(tài)，我們建議使用updater函數(shù)形式，而不是：

this.setState((prevState) => {  return {quantity: prevState.quantity + 1};});

有關(guān)更多詳細(xì)信息，請(qǐng)參閱州和生命周期指南。

forceUpdate()

component.forceUpdate(callback)

默認(rèn)情況下，當(dāng)你的組件的狀態(tài)或道具改變時(shí)，你的組件將重新渲染。如果你的render()方法依賴于其他一些數(shù)據(jù)，你可以通過調(diào)用告訴React組件需要重新渲染forceUpdate()。

調(diào)用forceUpdate()將導(dǎo)致render()在組件上調(diào)用，跳過shouldComponentUpdate()。這將觸發(fā)子組件的正常生命周期方法，包括shouldComponentUpdate()每個(gè)孩子的方法。如果標(biāo)記更改，React仍然只會(huì)更新DOM。

通常情況下，你應(yīng)該盡量避免的所有使用forceUpdate()和只讀this.props，并this.state在render()。

類屬性

defaultProps

defaultProps可以被定義為組件類本身的屬性，以設(shè)置該類的默認(rèn)道具。這用于未定義的道具，但不適用于null道具。例如：

class CustomButton extends React.Component {  // ...}CustomButton.defaultProps = {
  color: 'blue'};

如果props.color沒有提供，它將被默認(rèn)設(shè)置為'blue'：

  render() {    return <CustomButton /> ; // props.color will be set to blue  }

如果props.color設(shè)置為空，它將保持為空：

  render() {    return <CustomButton color={null} /> ; // props.color will remain null  }

displayName

該displayName字符串用于調(diào)試消息。通常，您不需要明確設(shè)置它，因?yàn)樗歉鶕?jù)定義組件的函數(shù)或類的名稱推斷出來的。如果要為調(diào)試目的顯示不同的名稱或創(chuàng)建高階組件時(shí)，可能需要顯式設(shè)置它，請(qǐng)參閱包裝顯示名稱以獲取詳細(xì)信息。

實(shí)例屬性

props

this.props包含由該組件的調(diào)用者定義的道具。有關(guān)道具的介紹，請(qǐng)參閱組件和道具。

特別是，它this.props.children是一個(gè)特殊的道具，通常由JSX表達(dá)式中的子標(biāo)簽定義，而不是標(biāo)簽本身。

state

狀態(tài)包含特定于此組件的數(shù)據(jù)，這些數(shù)據(jù)可能隨時(shí)間而改變。狀態(tài)是用戶定義的，它應(yīng)該是一個(gè)普通的JavaScript對(duì)象。

如果你不使用它render()，它不應(yīng)該處于狀態(tài)。例如，您可以將計(jì)時(shí)器ID直接放在實(shí)例上。

有關(guān)狀態(tài)的更多信息，請(qǐng)參閱狀態(tài)和生命周期。

不要this.state直接變異，因?yàn)?code>setState()之后調(diào)用可能會(huì)取代你所做的變異。把this.state它看作是不可改變的。