如何使用React生命周期

小編這次要給大家分享的是如何使用React生命周期，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

React生命周期

生命周期概覽

生命周期的狀態(tài)

組件的生命周期可分成三個狀態(tài)：

• Mounting：已插入真實 DOM
• Updating：正在被重新渲
• Unmounting：已移出真實 DOM
• componentWillMount 在渲染前調(diào)用,在客戶端也在服務(wù)端。

生命周期介紹

componentDidMount :

在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode()來進(jìn)行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請求等操作(防止異步操作阻塞UI)。

componentWillReceiveProps

在組件接收到一個新的 prop (更新后)時被調(diào)用。這個方法在初始化render時不會被調(diào)用。

shouldComponentUpdate

返回一個布爾值。在組件接收到新的props或者state時被調(diào)用。在初始化時或者使用forceUpdate時不被調(diào)用。

可以在你確認(rèn)不需要更新組件時使用。

componentWillUpdate

在組件接收到新的props或者state但還沒有render時被調(diào)用。在初始化時不會被調(diào)用。

componentDidUpdate

在組件完成更新后立即調(diào)用。在初始化時不會被調(diào)用。

componentWillUnmount

在組件從 DOM 中移除之前立刻被調(diào)用。

代碼示意

class Content extends React.Component {
 componentWillMount() {
   console.log('Component WILL MOUNT!')
 }
 componentDidMount() {
    console.log('Component DID MOUNT!')
 }
 componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
 }
 shouldComponentUpdate(newProps, newState) {
    return true;
 }
 componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
 }
 componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
 }
 componentWillUnmount() {
     console.log('Component WILL UNMOUNT!')
 } 

React16.3生命周期

安裝

在創(chuàng)建組件的實例并將其插入DOM時，將按以下順序調(diào)用這些方法：

constructor()

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

通常，在React中，構(gòu)造函數(shù)僅用于兩個目的：

通過分配對象來初始化本地狀態(tài)this.state。

將事件處理程序方法綁定到實例。

不應(yīng)該打電話setState()給constructor()。相反，如果您的組件需要使用本地狀態(tài)，請直接在構(gòu)造函數(shù)中指定初始狀態(tài)this.state。

構(gòu)造函數(shù)是his.state直接分配的唯一位置。在所有其他方法中，需要使用this.setState()。

static getDerivedStateFromProps()

getDerivedStateFromProps在調(diào)用render方法之前調(diào)用，無論是在初始安裝還是后續(xù)更新。它應(yīng)該返回一個更新狀態(tài)的對象，或者返回null以不更新任何狀態(tài)。

render()

render()方法是類組件中唯一必需的方法。

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

• React elements。通常通過JSX創(chuàng)建。
• Arrays and fragments。讓您從渲染中返回多個元素。有關(guān)更多詳細(xì)信息，請參閱片段文檔。
• Portals。
• 字符串和數(shù)字。它們在DOM中呈現(xiàn)為文本節(jié)點(diǎn)。
• 布爾或null。什么都沒有。

該render()函數(shù)應(yīng)該無狀態(tài)的，這意味著它不會修改組件狀態(tài)，每次調(diào)用時都返回相同的結(jié)果，并且它不直接與瀏覽器交互。

如果您需要與瀏覽器進(jìn)行交互，請執(zhí)行componentDidMount()或其他生命周期方法。保持render()純粹使組件更容易思考。

如果shouldComponentUpdate()返回false，則render()不會被調(diào)用

componentDidMount()

• componentDidMount()在安裝組件（插入樹中）后立即調(diào)用。需要DOM節(jié)點(diǎn)的初始化應(yīng)該放在這里。如果需要從遠(yuǎn)程端點(diǎn)加載數(shù)據(jù)，這是實例化網(wǎng)絡(luò)請求的好地方。
• 此方法是設(shè)置任何訂閱的好地方。如果您這樣做，請不要忘記取消訂閱componentWillUnmount()。
• 您可以在componentDidMount()立即使用this.setState()。它將觸發(fā)額外的渲染，但它將在瀏覽器更新屏幕之前發(fā)生。這保證即使render()在這種情況下將被調(diào)用兩次，用戶也不會看到中間狀態(tài)。請謹(jǐn)慎使用此模式，因為它通常會導(dǎo)致性能問題。在大多數(shù)情況下，您應(yīng)該能夠分配初始狀態(tài)constructor()。但是，當(dāng)您需要在渲染依賴于其大小或位置的東西之前測量DOM節(jié)點(diǎn)時，可能需要對模態(tài)和工具提示等情況進(jìn)行處理。

這些方法被認(rèn)為是遺留的,應(yīng)該在新代碼中避免它們：

UNSAFE_componentWillMount()

更新

props or state 的更改可能導(dǎo)致更新。重新渲染組件時，將按以下順序調(diào)用這些方法：

static getDerivedStateFromProps()
render()
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate()在最近呈現(xiàn)的輸出被提交到例如DOM之前調(diào)用。它使得組件可以在可能更改之前從DOM捕獲一些信息（例如滾動位置）。此生命周期返回的任何值都將作為參數(shù)傳遞給componentDidUpdate()。

此用例并不常見，但它可能出現(xiàn)在需要以特殊方式處理滾動位置的聊天線程等UI中。

官網(wǎng)的例子

class ScrollingList extends React.Component {
 constructor(props) {
  super(props);
  this.listRef = React.createRef();
 }

 getSnapshotBeforeUpdate(prevProps, prevState) {
  // Are we adding new items to the list?
  // Capture the scroll position so we can adjust scroll later.
  if (prevProps.list.length < this.props.list.length) {
   const list = this.listRef.current;
   return list.scrollHeight - list.scrollTop;
  }
  return null;
 }

 componentDidUpdate(prevProps, prevState, snapshot) {
  // If we have a snapshot value, we've just added new items.
  // Adjust scroll so these new items don't push the old ones out of view.
  // (snapshot here is the value returned from getSnapshotBeforeUpdate)
  if (snapshot !== null) {
   const list = this.listRef.current;
   list.scrollTop = list.scrollHeight - snapshot;
  }
 }

 render() {
  return (
   <div ref={this.listRef}>{/* ...contents... */}</div>
  );
 }
}

componentDidUpdate()

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

將此作為在更新組件時對DOM進(jìn)行操作的機(jī)會。只要您將當(dāng)前道具與之前的道具進(jìn)行比較（例如，如果道具未更改，則可能不需要網(wǎng)絡(luò)請求），這也是進(jìn)行網(wǎng)絡(luò)請求的好地方。

componentDidUpdate(prevProps) {
 // Typical usage (don't forget to compare props):
 if (this.props.userID !== prevProps.userID) {
  this.fetchData(this.props.userID);
 }
}

componentDidUpdate()但要注意，必須在一個條件下被包裹就像上面的例子中，否則會導(dǎo)致無限循環(huán)。它還會導(dǎo)致額外的重新渲染，雖然用戶不可見，但會影響組件性能。

componentDidUpdate()：如果shouldComponentUpdate()返回false，則不會被調(diào)用。

這些方法被認(rèn)為是遺留的，您應(yīng)該在新代碼中避免它們：

UNSAFE_componentWillUpdate()

UNSAFE_componentWillReceiveProps()

卸載

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

componentWillUnmount()

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

不應(yīng)該調(diào)用setState()，componentWillUnmount()因為組件永遠(yuǎn)不會被重新呈現(xiàn)。卸載組件實例后，將永遠(yuǎn)不會再次安裝它。

錯誤處理

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

static getDerivedStateFromError()

static getDerivedStateFromError(error)

在后代組件拋出錯誤后調(diào)用此生命周期。它接收作為參數(shù)拋出的錯誤，并應(yīng)返回值以更新狀態(tài)。

componentDidCatch()

componentDidCatch(error, info)

在后代組件拋出錯誤后調(diào)用此生命周期。它接收兩個參數(shù)：

error - 拋出的錯誤。

info- componentStack包含鍵的對象，其中包含有關(guān)哪個組件引發(fā)錯誤的信息。

如果發(fā)生錯誤，可以componentDidCatch()通過調(diào)用呈現(xiàn)回退UI setState，但在將來的版本中將不推薦使用。使用static getDerivedStateFromError()處理回退，而不是渲染。

componentDidCatch()在“提交”階段被調(diào)用，因此允許副作用。它應(yīng)該用于記錄錯誤之類的事情：

class ErrorBoundary extends React.Component {
 constructor(props) {
  super(props);
  this.state = { hasError: false };
 }

 static getDerivedStateFromError(error) {
  // Update state so the next render will show the fallback UI.
  return { hasError: true };
 }

 componentDidCatch(error, info) {
  // Example "componentStack":
  //  in ComponentThatThrows (created by App)
  //  in ErrorBoundary (created by App)
  //  in div (created by App)
  //  in App
  logComponentStackToMyService(info.componentStack);
 }

 render() {
  if (this.state.hasError) {
   // You can render any custom fallback UI
   return <h2>Something went wrong.</h2>;
  }
  return this.props.children; 
 }
}

看完這篇關(guān)于如何使用React生命周期的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。