一篇包含了React所有基本點(diǎn)的文章
去年，我寫了一本關(guān)于學(xué)習(xí)React.js的小書，原來是大約100頁(yè)。 今年我要挑戰(zhàn)自己，把它歸納為一篇文章。
本文不會(huì)涵蓋什么是React，或者為什么要學(xué)習(xí)它。 相反，這是面向已經(jīng)熟悉JavaScript并熟悉DOM API基礎(chǔ)知識(shí)的人，對(duì)React.js的基礎(chǔ)知識(shí)的介紹。
以下所有代碼示例均標(biāo)示為參考。 它們純粹是為了提供概念而寫的例子。 他們大多數(shù)可以寫得更好一些。
1：組件是React的一切
React是圍繞可重用組件的概念設(shè)計(jì)的。 您定義小組件，并將它們放在一起形成更大的組件。
所有小或小的組件都可重復(fù)使用，甚至跨不同的項(xiàng)目。
一個(gè)React組件(以其最簡(jiǎn)單的形式)是一個(gè)簡(jiǎn)單的JavaScript函數(shù)：
- // Example 1
- // https://jscomplete.com/repl?j=Sy3QAdKHW
- function Button (props) {
- // Returns a DOM element here. For example:
- return <button type="submit">{props.label}</button>;
- }
- // To render the Button component to the browser
- ReactDOM.render(<Button label="Save" />, mountNode)
用于按鈕標(biāo)簽的花括號(hào)將在下面介紹。 現(xiàn)在不必要擔(dān)心他們。 ReactDOM也將在后面解釋，但是如果要測(cè)試這個(gè)例子和接下來的代碼示例，render函數(shù)就是你需要的。
ReactDOM.render的第二個(gè)參數(shù)是React將要接管和控制的目標(biāo)DOM元素。 在jsComplete REPL中，您就可以使用mountNode變量。
關(guān)于示例1的注意事項(xiàng)有以下幾點(diǎn)：
- 組件名稱以大寫字母開頭。 這是必需的，因?yàn)槲覀儗⑻幚鞨TML元素和React元素的混合。 小寫名稱保留給HTML元素。 事實(shí)上，請(qǐng)繼續(xù)嘗試將React組件命名為“button”。 ReactDOM將忽略該函數(shù)并呈現(xiàn)常規(guī)的空HTML按鈕。
- 每個(gè)組件都接收一個(gè)屬性列表，就像HTML元素一樣。 在React中，這個(gè)列表叫做props。創(chuàng)建功能組件，你可以通過使用任意名稱命名props。
- 在上面的Button組件的返回中，我們寫出了奇怪的HTML。 這既不是JavaScript也不是HTML，甚至不是React.js。 但是，它非常受歡迎，成為React應(yīng)用程序中的默認(rèn)設(shè)置。 它被稱為JSX，它是一個(gè)JavaScript擴(kuò)展。 JSX也是妥協(xié)! 繼續(xù)嘗試在上面的函數(shù)中的任何其他HTML元素，并查看它們是如何支持的(例如，返回一個(gè)文本輸入元素)。
2: What the flux is JSX?
上面的示例1可以用純粹的React.js來編寫，而不需要JSX，如下所示：
- // Example 2 - React component without JSX
- // https://jscomplete.com/repl?j=HyiEwoYB-
- function Button (props) {
- return React.createElement(
- "button",
- { type: "submit" },
- props.label
- );
- }
- // To use Button, you would do something like
- ReactDOM.render(
- React.createElement(Button, { label: "Save" }),
- mountNode
- );
上面的示例1可以用純粹的React.js來編寫，而不需要JSX，如下所示：
createElement函數(shù)是React***API中函數(shù)。 您需要學(xué)習(xí)的這個(gè)級(jí)別中共有7件事情中的1項(xiàng)。 可見ReactApi多么簡(jiǎn)短。
很像DOM本身有一個(gè)document.createElement函數(shù)來創(chuàng)建一個(gè)由標(biāo)簽名稱指定的元素，React的createElement函數(shù)是一個(gè)更高級(jí)別的函數(shù)，可以做類似于document.createElement的功能。 但它也可以用于創(chuàng)建一個(gè)表示React組件的元素。 當(dāng)我們使用上面的例2中的Button組件時(shí)，我們這里就是創(chuàng)建了一個(gè)React組件。
與document.createElement不同，React的createElement可以接受第二個(gè)參數(shù)之后的動(dòng)態(tài)參數(shù)，以表示創(chuàng)建的元素的后代。 所以createElement實(shí)際上創(chuàng)建一個(gè)樹。
這是一個(gè)例子：
- / Example 3 - React’s createElement API
- // https://jscomplete.com/repl?j=r1GNoiFBb
- const InputForm = React.createElement(
- "form",
- { target: "_blank", action: "https://google.com/search" },
- React.createElement("div", null, "Enter input and click Search"),
- React.createElement("input", { name: "q", className: "input" }),
- React.createElement(Button, { label: "Search" })
- );
- // InputForm uses the Button component, so we need that too:
- function Button (props) {
- return React.createElement(
- "button",
- { type: "submit" },
- props.label
- );
- }
- // Then we can use InputForm directly with .render
- ReactDOM.render(InputForm, mountNode);
關(guān)于以上例子要注意的幾點(diǎn)：
- InputForm不是React組件; 它只是一個(gè)React元素。 這就是為什么我們直接在ReactDOM.render調(diào)用中使用它，而不是使用<InputForm />。
- 我們可以嵌套R(shí)eact.createElement調(diào)用，因?yàn)樗际荍avaScript。
- React.createElement的第二個(gè)參數(shù)可以是null，也可以是一個(gè)空對(duì)象，當(dāng)元素不需要attributes和props時(shí)。
- 我們可以將HTML元素與React組件混合使用。 您可以將HTML元素視為內(nèi)置的React組件。
- React的API嘗試盡可能接近DOM API，因此我們?yōu)檩斎朐厥褂胏lassName而不是類。 私以為，我們都希望React的API將成為DOM API本身的一部分。 因?yàn)?，你知道的，這有太多的好處了。
上面的代碼是您在引入React庫(kù)時(shí)了解的內(nèi)容。 瀏覽器不處理任何JSX業(yè)務(wù)。 然而，我們?nèi)祟愊矚g看HTML并且使用HTML而不是這些createElement調(diào)用(想象一下使用document.createElement構(gòu)建一個(gè)網(wǎng)站，我相信你可以的!)。 這就是為什么存在JSX的原因。 我們可以用非常類似于HTML的語法編寫它，而不是用React.createElement調(diào)用上面的表單：
- // Example 4 - JSX (compare with Example 3)
- // https://jscomplete.com/repl?j=SJWy3otHW
- const InputForm =
- <form target="_blank" action="https://google.com/search">
- <div>Enter input and click Search</div>
- <input name="q" className="input" />
- <Button label="Search" />
- </form>;
- // InputForm "still" uses the Button component, so we need that too.
- // Either JSX or normal form would do
- function Button (props) {
- // Returns a DOM element here. For example:
- return <button type="submit">{props.label}</button>;
- }
- // Then we can use InputForm directly with .render
- ReactDOM.render(InputForm, mountNode);
關(guān)于上面的例子注意以下幾點(diǎn)
- 它不是HTML。 例如，我們?nèi)匀辉谑褂胏lassName而不是類。
- 我們?nèi)匀辉诳紤]將以上HTML作為JavaScript。 看看我在末尾添加了分號(hào)。
我們上面寫的(例4)是JSX。 然而，我們?cè)跒g覽器的執(zhí)行版本是它的編譯版本(示例3)。 為了實(shí)現(xiàn)這一點(diǎn)，我們需要使用預(yù)處理器將JSX版本轉(zhuǎn)換為React.createElement版本。
那就是JSX。 這是一個(gè)折中，允許我們以類似于HTML的語法編寫我們的React組件，這是一個(gè)很好的共識(shí)。
上面標(biāo)題中的“Flux”一詞被選為韻腳(...)，但它也是Facebook流行的非常受歡迎的應(yīng)用程序架構(gòu)的名稱。 最著名的實(shí)現(xiàn)是Redux。
JSX，順便說一下，可以自己在其他地方使用。 這不是只有在React中才可以使用的。
3: 您可以在JSX中的任何位置使用JavaScript表達(dá)式
在JSX部分中，您可以在一對(duì)花括號(hào)內(nèi)使用任何JavaScript表達(dá)式。
- // Example 5 - Using JavaScript expressions in JSX
- // https://jscomplete.com/repl?j=SkNN3oYSW
- const RandomValue = () =>
- <div>
- { Math.floor(Math.random() * 100) }
- </div>;
- // To use it:
- ReactDOM.render(<RandomValue />, mountNode);
任何JavaScript表達(dá)式都可以放在那些花括號(hào)內(nèi)。 這相當(dāng)于JavaScript模板文字中的$ {}插值語法。
這是JSX中唯一的約束：只有表達(dá)式。 所以，你不能使用常規(guī)的if語句，但是三元表達(dá)式是可以的。
JavaScript變量也是表達(dá)式，所以當(dāng)組件接收到props列表(RandomValue組件沒有，props是可選的)時(shí)，可以在花括號(hào)內(nèi)使用這些props。 我們?cè)谏厦娴腂utton組件中這樣做了(示例1)。
JavaScript對(duì)象也是表達(dá)式。 有時(shí)候，我們?cè)谝粋€(gè)花括號(hào)里面使用一個(gè)JavaScript對(duì)象，這使得它看起來像雙花括號(hào)，但它實(shí)際上只是一個(gè)大括號(hào)內(nèi)的一個(gè)對(duì)象。 一個(gè)用例是將CSS樣式對(duì)象傳遞給React中的style屬性：
- // Example 6 - An object passed to the special React style prop
- // https://jscomplete.com/repl?j=S1Kw2sFHb
- const ErrorDisplay = ({message}) =>
- <div style={ { color: 'red', backgroundColor: 'yellow' } }>
- {message}
- </div>;
- // Use it:
- ReactDOM.render(
- <ErrorDisplay
- message="These aren't the droids you're looking for"
- />,
- mountNode
- );
請(qǐng)注意，我如何僅解析props參數(shù)中的message的。 這是JavaScript。 還要注意上面的style屬性是一個(gè)特殊的屬性(再次，它不是HTML，它更接近于DOM API)。 我們使用一個(gè)對(duì)象作為style屬性的值。 該對(duì)象定義了樣式，就像我們使用JavaScript一樣(因?yàn)榇_實(shí)就是)。
甚至可以在JSX中使用React元素，因?yàn)檫@也是一個(gè)表達(dá)式。 記住，一個(gè)React元素就是一個(gè)函數(shù)調(diào)用：
- const MaybeError = ({errorMessage}) =>
- <div>
- {errorMessage && <ErrorDisplay message={errorMessage} />}
- </div>;
- // The MaybeError component uses the ErrorDisplay component:
- const ErrorDisplay = ({message}) =>
- <div style={ { color: 'red', backgroundColor: 'yellow' } }>
- {message}
- </div>;
- // Now we can use the MaybeError component:
- ReactDOM.render(
- <MaybeError
- errorMessage={Math.random() > 0.5 ? 'Not good' : ''}
- />,
- mountNode
- );
上面的MaybeError組件將只顯示ErrorDisplay組件，如果有一個(gè)errorMessage字符串傳遞給它和一個(gè)空的div。 React將{true}，{false}，{undefined}和{null}視為沒有呈現(xiàn)任何內(nèi)容的有效元素子元素。
您還可以使用JSX內(nèi)的集合上的所有JavaScript方法(map，reduce，filter，concat等)。 再次聲明原因是因?yàn)樗鼈兎祷氐氖潜磉_(dá)式：
- // Example 8 - Using an array map inside {}
- // https://jscomplete.com/repl?j=SJ29aiYH-
- const Doubler = ({value=[1, 2, 3]}) =>
- <div>
- {value.map(e => e * 2)}
- </div>;
- // Use it
- ReactDOM.render(<Doubler />, mountNode);
請(qǐng)注意，我是如何給valueprops默認(rèn)值的，因?yàn)樗荍avascript。 還要注意，我在div中輸出了一個(gè)數(shù)組表達(dá)式，這在React中是可行的。 它將把每一個(gè)雙倍的值放在一個(gè)文本節(jié)點(diǎn)中。
4: 您可以使用JavaScript類編寫React組件
簡(jiǎn)單的功能組件非常適合簡(jiǎn)單的需求，但有時(shí)我們需要更多的功能。 React支持通過JavaScript類語法創(chuàng)建組件。 這是使用類語法編寫的Button組件(在示例1中)：
- // Example 9 - Creating components using JavaScript classes
- // https://jscomplete.com/repl?j=ryjk0iKHb
- class Button extends React.Component {
- render() {
- return <button>{this.props.label}</button>;
- }
- }
- // Use it (same syntax)
- ReactDOM.render(<Button label="Save" />, mountNode);
類語法很簡(jiǎn)單。 定義一個(gè)擴(kuò)展了React.Component基類的類(需要學(xué)習(xí)的另一個(gè)***的React API)。 該類定義一個(gè)唯一實(shí)例函數(shù)render()，該render函數(shù)返回虛擬DOM對(duì)象。 每次我們使用上面的基于Button類的組件(例如，通過執(zhí)行<Button ... />)，React將從這個(gè)基于類的組件中實(shí)例化一個(gè)對(duì)象，并在DOM樹中使用該對(duì)象。
這就是為什么我們?cè)谏厦娴匿秩据敵鲋性贘SX中使用this.props.label的原因。 因?yàn)槊總€(gè)組件都獲得一個(gè)稱為props的特殊實(shí)例屬性，該實(shí)例屬性在實(shí)例化時(shí)保存?zhèn)鬟f給該組件的所有值。
- // Example 10 - Customizing a component instance
- // https://jscomplete.com/repl?j=rko7RsKS-
- class Button extends React.Component {
- constructor(props) {
- super(props);
- this.id = Date.now();
- }
- render() {
- return <button id={this.id}>{this.props.label}</button>;
- }
- }
- // Use it
- ReactDOM.render(<Button label="Save" />, mountNode);
我們還可以定義類屬性函數(shù)，并在我們想使用的地方使用，包括返回的JSX輸出內(nèi)：
- // Example 11 — Using class properties
- // https://jscomplete.com/repl?j=H1YDCoFSb
- class Button extends React.Component {
- clickCounter = 0;
- handleClick = () => {
- console.log(`Clicked: ${++this.clickCounter}`);
- };
- render() {
- return (
- <button id={this.id} onClick={this.handleClick}>
- {this.props.label}
- </button>
- );
- }
- }
- // Use it
- ReactDOM.render(<Button label="Save" />, mountNode);
關(guān)于例子11有幾點(diǎn)需要注意
- handleClick函數(shù)是使用JavaScript中新建的類字段語法編寫的。這種語法仍然屬于stage-2,，但由于很多原因，它是訪問組件安裝實(shí)例(由于箭頭功能)的***選擇。 但是，您需要使用像Babel這樣的編譯器來配置它來理解stage-2,(或類字段語法)來獲取上面的代碼。 jsComplete REPL具有預(yù)配置。
- 我們還使用相同的類字段語法定義了ClickCounter實(shí)例變量。 這允許我們完全跳過使用類構(gòu)造函數(shù)調(diào)用。
- 當(dāng)我們將handleClick函數(shù)指定為特殊的onClick，React屬性的值時(shí)，我們沒有調(diào)用它。 我們把handleClick函數(shù)引用傳遞給出去了。 在這個(gè)屬性里面調(diào)用函數(shù)是使用React最常見的錯(cuò)誤之一。
- // Wrong:
- onClick={this.handleClick()}
- // Right:
- onClick={this.handleClick}
5: React的事件中，兩個(gè)最重要的區(qū)別
在React元素中處理事件時(shí)，與DOM API的方式有兩個(gè)非常重要的區(qū)別：
- 所有React元素屬性(包括事件)使用camelCase命名，而不是小寫。 它是onClick，而不是onclick。
- 我們傳遞一個(gè)實(shí)際的JavaScript函數(shù)引用作為事件處理程序，而不是一個(gè)字符串。 它是onClick = {handleClick}，而不是onClick =“handleClick”。
使用自己的對(duì)象將DOM事件對(duì)象包裝起來，以優(yōu)化事件處理的性能。 但是在事件處理程序中，我們?nèi)匀豢梢栽L問DOM事件對(duì)象上可用的所有方法。 React將包裝的事件對(duì)象傳遞給每個(gè)句柄調(diào)用。 例如，為了防止表單從默認(rèn)提交操作中，您可以執(zhí)行以下操作：
- // Example 12 - Working with wrapped events
- // https://jscomplete.com/repl?j=HkIhRoKBb
- class Form extends React.Component {
- handleSubmit = (event) => {
- event.preventDefault();
- console.log('Form submitted');
- };
- render() {
- return (
- <form onSubmit={this.handleSubmit}>
- <button type="submit">Submit</button>
- </form>
- );
- }
- }
- // Use it
- ReactDOM.render(<Form />, mountNode);
6: 每一個(gè)React組件都有故事
以下僅適用于類組件(擴(kuò)展為React.Component的組件)。 函數(shù)組件有一個(gè)略有不同的故事。
- 首先，我們?yōu)镽eact定義一個(gè)模板，以從組件創(chuàng)建元素。
- 然后，我們指示React在某處使用它。 例如，在另一個(gè)組件的render調(diào)用中，或者使用ReactDOM.render。
- 然后，React實(shí)例化一個(gè)元素，并給出一組我們可以使用this.props訪問的props。 那些props正是我們?cè)谏厦娴牟襟E2中傳遞的。
- 由于它都是JavaScript，所以構(gòu)造方法將被調(diào)用(如果已經(jīng)定義的話)。 這是我們要說的***個(gè)：組件生命周期方法。
- 然后React計(jì)算render方法(虛擬DOM節(jié)點(diǎn))的輸出。
- 由于這是React渲染元素的***次，React將與瀏覽器進(jìn)行通信(代表我們使用DOM API)來顯示元素。 這個(gè)過程通常被稱為掛載。
- 然后，React調(diào)用另一個(gè)生命周期方法，稱為componentDidMount。 我們可以使用這種方法做一些事情，例如，在DOM上做一些我們現(xiàn)在知道在瀏覽器中支持處理的東西。 在此生命周期方法之前，我們處理的DOM全部是虛擬的。
- 一些組件故事在這里結(jié)束。 出于各種原因，其他組件可以從瀏覽器DOM中解除掛載。 在后一種情況發(fā)生之前，React調(diào)用另一個(gè)生命周期方法componentWillUnmount。
- 任何已掛載元件的狀態(tài)可能會(huì)改變。 該元素的父代可能會(huì)重新呈現(xiàn)。 在任一種情況下，安裝的元件可能會(huì)接收不同的props。 這里的魔法發(fā)生了，我們現(xiàn)在開始需要React了! 在此之前，我們完全不需要做任何事情
- 這個(gè)組件的故事繼續(xù)下去，但在之前，我們需要了解我所說的這個(gè)狀態(tài)。
7: React組件有一個(gè)私有狀態(tài)
以下也僅適用于類組件。 有沒有人提到有些人把只做展現(xiàn)的組件叫做啞巴?
狀態(tài)類字段是任何React類組件中的特殊字段。 React監(jiān)視每個(gè)組件狀態(tài)以進(jìn)行更改。 但是對(duì)于React要有效地執(zhí)行這些操作，我們必須通過另一個(gè)需要學(xué)習(xí)的React API函數(shù)來更改state字段，this.setState：
- // Example 13 - the setState API
- // https://jscomplete.com/repl?j=H1fek2KH-
- 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 (
- <div>
- <button onClick={this.handleClick}>Click</button>
- <p>Clicked: {this.state.clickCounter}</p>
- <p>Time: {this.state.currentTimestamp.toLocaleString()}</p>
- </div>
- );
- }
- }
- // Use it
- ReactDOM.render(<CounterButton />, mountNode);
這是了解state最重要的例子。 它將完善您對(duì)React交互方式的基礎(chǔ)知識(shí)。 在這個(gè)例子之后，還有一些你需要學(xué)習(xí)的小事情，但是從這一點(diǎn)來看，它主要是你和你的JavaScript技能。
我們來看一下實(shí)例13，從類字段開始。 它有兩個(gè)。 特殊狀態(tài)字段被初始化為一個(gè)對(duì)象，該對(duì)象包含起始值為0的clickCounter，以及起始值為new Date()的currentTimestamp。
第二個(gè)類字段是一個(gè)handleClick函數(shù)，我們傳遞給render方法中的button元素的onClick事件。 handleClick方法使用setState修改此組件實(shí)例狀態(tài)。 注意到這一點(diǎn)。
我們?cè)赾omponentDidMount生命周期方法內(nèi)部啟動(dòng)的間隔定時(shí)器中修改狀態(tài)。 它每秒鐘打勾并執(zhí)行調(diào)用this.setState。
在render方法中，我們使用了正常讀取語法對(duì)state兩個(gè)屬性的讀取。 沒有特殊的API。
現(xiàn)在，請(qǐng)注意，我們使用兩種不同的方式更新了狀態(tài)：
- 傳遞返回一個(gè)對(duì)象的函數(shù)。 我們handleClick函數(shù)中實(shí)現(xiàn)了這部分內(nèi)容。
- 通過傳遞一個(gè)常規(guī)對(duì)象。 我們?cè)陂g隔回調(diào)中實(shí)現(xiàn)了。
這兩種方式都是可以接受的，但是當(dāng)您同時(shí)讀取和寫入狀態(tài)時(shí)，***個(gè)是***的(我們這樣做)。 在間隔回調(diào)之內(nèi)，我們只寫給狀態(tài)，而不是讀取它。 當(dāng)兩難時(shí)，始終使用***個(gè)函數(shù)參數(shù)語法。 它更加安全，因?yàn)閟etState實(shí)際上是一個(gè)異步方法。
我們?nèi)绾胃聽顟B(tài)? 我們返回一個(gè)包含我們要更新的值的對(duì)象。 注意在兩次調(diào)用setState中，我們只是從state字段傳遞一個(gè)屬性，而不是兩者。 這是完全可以的，因?yàn)閟etState實(shí)際上將您傳遞的內(nèi)容(函數(shù)參數(shù)的返回值)與現(xiàn)有狀態(tài)合并。 因此，在調(diào)用setState時(shí)不指定屬性意味著我們不希望更改該屬性(而不是刪除它)。
8:React是可以響應(yīng)的
React從它對(duì)狀態(tài)變化做出響應(yīng)的事實(shí)(雖然不是反應(yīng)性的，而是按計(jì)劃進(jìn)行)而得名。 有一個(gè)笑話，反應(yīng)應(yīng)該被命名為Schedule!
然而，當(dāng)任何組件的狀態(tài)被更新時(shí)，我們用肉眼看到的是React對(duì)該更新做出反應(yīng)，并自動(dòng)反映瀏覽器DOM中的更新(如果需要)。
將render函數(shù)輸入視為兩者
- 從父元素得到props
- 可以隨時(shí)更新的內(nèi)部私有狀態(tài)
當(dāng)渲染功能的輸入變化時(shí)，其輸出可能會(huì)改變。
React保留了渲染歷史的記錄，當(dāng)它看到一個(gè)渲染與前一個(gè)渲染不同時(shí)，它將計(jì)算它們之間的差異，并將其有效地轉(zhuǎn)換為在DOM中執(zhí)行的實(shí)際DOM操作。
9: React是你的代理
您可以將React視為我們聘請(qǐng)的與瀏覽器通信的代理。 以上面的當(dāng)前時(shí)間戳顯示為例。 我們不是手動(dòng)去瀏覽器并調(diào)用DOM API操作來每秒查找和更新p#timestamp元素，而是在組件狀態(tài)上更改了一個(gè)屬性，而React代表我們與瀏覽器進(jìn)行通信。 我相信這是真正受歡迎的真正原因。 我們討厭瀏覽器(和所說的DOM語言的很多方言)，React自愿為我們做所有的談話，免費(fèi)!
10: 每個(gè)React組件都有一個(gè)故事(第2部分)
現(xiàn)在我們知道一個(gè)組件的狀態(tài)，以及當(dāng)這個(gè)狀態(tài)改變了一些魔法的時(shí)候，讓我們來學(xué)習(xí)關(guān)于該過程的***幾個(gè)概念。
- 組件可能需要在其狀態(tài)更新時(shí)重新呈現(xiàn)，或者當(dāng)其父級(jí)決定更改傳遞給組件的props時(shí)，該組件可能需要重新呈現(xiàn)
- 如果后者發(fā)生，React會(huì)調(diào)用另一個(gè)生命周期方法componentWillReceiveProps。
- 如果狀態(tài)對(duì)象或傳入props被更改，則React有一個(gè)重要的決定。 組件應(yīng)該在DOM中更新嗎? 這就是為什么它在這里調(diào)用另一個(gè)重要的生命周期方法，shouldComponentUpdate。 這個(gè)方法是一個(gè)實(shí)際的問題，所以如果你需要自己定制或優(yōu)化渲染過程，你必須通過返回true或false來回答這個(gè)問題。
- 如果沒有指定customComponentUpdate，React默認(rèn)是一個(gè)非常聰明的事情，在大多數(shù)情況下實(shí)際上足夠好。
- 首先，React在此時(shí)調(diào)用另一個(gè)生命周期方法componentWillUpdate。 然后React將計(jì)算新的渲染輸出并將其與***渲染的輸出進(jìn)行比較。
- 如果渲染的輸出完全一樣，React什么都不做。
- 如果存在差異，則React會(huì)將這些差異映射到瀏覽器內(nèi)。
- 無論如何，由于更新過程無論如何(即使輸出完全相同)，React會(huì)調(diào)用最終的生命周期方法componentDidUpdate。
生命周期方法實(shí)際上是艙口。 如果你沒有做任何事情，你可以創(chuàng)建沒有他們的完整的應(yīng)用程序。 他們可以用來非常方便地分析應(yīng)用程序中發(fā)生的情況，并進(jìn)一步優(yōu)化了React更新的性能。
