React生命週期

當元件例項被建立並插入 dom 中時，其生命週期呼叫順序如下：

constructor()

static getderivedstatefromprops()

render()

componentdidmount()

當元件的 props 或 state 發生變化時會觸發更新。元件更新的生命週期呼叫順序如下：

static getderivedstatefromprops()

shouldcomponentupdate()

render()

getsnapshotbeforeupdate()

componentdidupdate()

當元件從 dom 中移除時會呼叫如下方法：

componentwillunmount()

當渲染過程，生命週期，或子元件的建構函式中丟擲錯誤時，會呼叫如下方法：

static getderivedstatefromerror()

componentdidcatch()

render

如需與瀏覽器進行互動，請在 componentdidmount() 或其他生命週期方法中執行你的操作。保持 render() 為純函式，可以使元件更容易思考。

constructor

在 constructor() 函式中不要呼叫 setstate() 方法。如果你的元件需要使用內部 state，請直接在建構函式中為 this.state 賦值初始 state

constructor
(props)
;this
.handleclick =
this
.handleclick.
bind
(this);
}

要避免在建構函式中引入任何***或訂閱。如遇到此場景，請將對應的操作放置在 componentdidmount 中。

避免將 props 的值複製給 state！這是乙個常見的錯誤：

constructor
(props)
;}

如此做毫無必要（你可以直接使用 this.props.color），同時還產生了 bug（更新 prop 中的 color 時，並不會影響 state）。應為constructor只執行一次。

componentdidmount

componentdidmount() 會在元件掛載後（插入 dom 樹中）立即呼叫。依賴於 dom 節點的初始化應該放在這裡。如需通過網路請求獲取資料，此處是例項化請求的好地方。

你可以在 componentdidmount() 裡直接呼叫 setstate()。它將觸發額外渲染，但此渲染會發生在瀏覽器更新螢幕之前。如此保證了即使在 render() 兩次呼叫的情況下，使用者也不會看到中間狀態。請謹慎使用該模式，因為它會導致效能問題。通常，你應該在 constructor() 中初始化 state。如果你的渲染依賴於 dom 節點的大小或位置，比如實現 modals 和 tooltips 等情況下，你可以使用此方式處理

componentdidupdate(prevprops, prevstate, snapshot)

componentdidupdate() 會在更新後會被立即呼叫。首次渲染不會執行此方法。

當元件更新後，可以在此處對 dom 進行操作。如果你對更新前後的 props 進行了比較，也可以選擇在此處進行網路請求。（例如，當 props 未發生變化時，則不會執行網路請求）。

componentdidupdate
(prevprops)
}

你也可以在 componentdidupdate() 中直接呼叫 setstate()，但請注意它必須被包裹在乙個條件語句裡，正如上述的例子那樣進行處理，否則會導致死迴圈。它還會導致額外的重新渲染，雖然使用者不可見，但會影響元件效能。不要將 props 「映象」給 state，請考慮直接使用 props。

componentwillunmount

componentwillunmount()中不應呼叫 setstate()，因為該元件將永遠不會重新渲染。元件例項解除安裝後，將永遠不會再掛載它。

shouldcomponentupdate(nextprops, nextstate)

根據 shouldcomponentupdate() 的返回值，判斷 react 元件的輸出是否受當前 state 或 props 更改的影響。預設行為是 state 每次發生變化元件都會重新渲染。大部分情況下，你應該遵循預設行為。

此方法僅作為效能優化的方式而存在。不要企圖依靠此方法來「阻止」渲染，因為這可能會產生 bug。你應該考慮使用內建的 purecomponent 元件，而不是手動編寫 shouldcomponentupdate()。purecomponent 會對 props 和 state 進行淺層比較，並減少了跳過必要更新的可能性。

我們不建議在 shouldcomponentupdate() 中進行深層比較或使用 json.stringify()。這樣非常影響效率，且會損害效能。

static getderivedstatefromprops(props, state)

getderivedstatefromprops 會在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫。它應返回乙個物件來更新 state，如果返回 null 則不更新任何內容。

請注意，不管原因是什麼，都會在每次渲染前觸發此方法。

getsnapshotbeforeupdate(prevprops, prevstate)

getsnapshotbeforeupdate() 在最近一次渲染輸出（提交到 dom 節點）之前呼叫。它使得元件能在發生更改之前從 dom 中捕獲一些資訊（例如，滾動位置）。此生命週期的任何返回值將作為引數傳遞給 componentdidupdate()。

static getderivedstatefromerror()

此生命週期會在後代元件丟擲錯誤後被呼叫。它將丟擲的錯誤作為引數，並返回乙個值以更新 state

componentdidcatch()

componentdidcatch() 會在「提交」階段被呼叫，因此允許執行***。它應該用於記錄錯誤之類的情況：

constructor （不能呼叫setstate）

getderivedstartfromprops（不能呼叫setstate）

render（不能呼叫setstate）

componentdidmount（能呼叫setstate）

更新getderivedstartfromprops（不能呼叫setstate）

componentshouldupdate（不能呼叫setstate）

getsnapshotbeforeupdate（不能呼叫setstate）

render（不能呼叫setstate）

componentdidupdate （能呼叫setstate）

解除安裝componentwillunmount（不能呼叫setstate）

class
extends
react.component
}static
getderivedstatefromprops
(props, state)
componentdidmount()
componentwillunmount()
static
getderivedstatefromerror
(error)
}componentdidcatch
(error, info)
shouldcomponentupdate
(nextprops, nextstate)
getsnapshotbeforeupdate
(prevprops, prevstate)
componentdidupdate
(prevprops, prevstate, snapshot)
handleclick=(
)=>)}
render()
>
+<
/button>
<
/div>);
}}

React生命週期

React 生命週期生命週期方法

react 生命週期

react生命週期

React生命週期

React 生命週期 生命週期方法

react 生命週期

react生命週期

相關推薦

React 生命週期生命週期方法