React組件在其應(yīng)用生命周期中會(huì)經(jīng)歷不同的階段，盡管幕后發(fā)生的事情可能并不明顯。

這些階段包括：

• 掛載
• 更新
• 卸載
• 錯(cuò)誤處理

每個(gè)階段都有相應(yīng)的方法，可以在該階段對(duì)組件執(zhí)行特定操作。例如，當(dāng)從網(wǎng)絡(luò)獲取數(shù)據(jù)時(shí)，您可能希望在componentDidMount()方法（在掛載階段可用）中調(diào)用處理API調(diào)用的函數(shù)。

了解不同的生命周期方法對(duì)于React應(yīng)用程序的開(kāi)發(fā)至關(guān)重要，因?yàn)樗试S我們?cè)谛枰獣r(shí)精確地觸發(fā)操作，而不會(huì)與其他操作混淆。本文將介紹每個(gè)生命周期，包括可用的方法以及我們使用它們的場(chǎng)景類型。

掛載階段

將掛載視為組件生命周期的初始階段。在掛載發(fā)生之前，組件尚未存在——它只是DOM中的一閃而過(guò)，直到掛載發(fā)生并將其作為文檔的一部分連接起來(lái)。

一旦組件掛載，我們就可以利用許多方法：constructor()、render()、componentDidMount()和static getDerivedStateFromProps()。每個(gè)方法都有其自身的用途，讓我們按順序來(lái)看一下。

constructor()

當(dāng)直接在組件上設(shè)置狀態(tài)以將方法綁定在一起時(shí)，需要constructor()方法。它看起來(lái)像這樣：

// 一旦輸入組件開(kāi)始掛載...
constructor(props) {
  // ...設(shè)置一些props...
  super(props);
  // ...在這種情況下，是一個(gè)空白用戶名...
  this.state = {
    username: ''
  };
  // ...然后綁定一個(gè)處理輸入更改的方法
  this.handleInputChange = this.handleInputChange.bind(this);
}

重要的是要知道，constructor是創(chuàng)建組件時(shí)調(diào)用的第一個(gè)方法。組件尚未渲染（即將到來(lái)），但DOM已經(jīng)知道它，我們可以在它渲染之前與它掛鉤。因此，這不是我們調(diào)用setState()或引入任何副作用的地方，因?yàn)榻M件仍然處于構(gòu)建階段！

我之前寫過(guò)一篇關(guān)于refs的教程，我注意到的一件事是在使用React.createRef()時(shí)，可以在constructor中設(shè)置ref。這是合理的，因?yàn)閞efs用于更改值而無(wú)需props或必須使用更新值重新渲染組件：

constructor(props) {
  super(props);
  this.state = {
    username: ''
  };
  this.inputText = React.createRef();
}

render()

render()方法是組件的標(biāo)記在前端顯示的地方。用戶此時(shí)可以看到并訪問(wèn)它。如果您曾經(jīng)創(chuàng)建過(guò)React組件，那么您已經(jīng)熟悉它了——即使您沒(méi)有意識(shí)到——因?yàn)樗枰敵鰳?biāo)記。

class App extends React.Component {
  // 掛載過(guò)程中，請(qǐng)渲染以下內(nèi)容！
  render() {
    return (
      <div>
        <p>Hello World!</p>
      </div>
    )
  }
}

但這并不是render()的全部用途！它還可以用于渲染組件數(shù)組：

class App extends React.Component {
  render () {
    return [
      <h2>JavaScript Tools</h2>,
      <frontend></frontend>,
      <backend></backend>
    ]
  }
}

甚至組件片段：

class App extends React.Component {
  render() {
    return (
      <react.fragment><p>Hello World!</p></react.fragment>
    )
  }
}

我們還可以使用它來(lái)渲染DOM層次結(jié)構(gòu)之外的組件（類似于React Portal）：

// 我們正在創(chuàng)建一個(gè)門戶，允許組件在DOM中移動(dòng)
class Portal extends React.Component {
  // 首先，我們創(chuàng)建一個(gè)div元素
  constructor() {
    super();
    this.el = document.createElement("div");
  }

  // 掛載后，讓我們追加組件的子元素
  componentDidMount = () => {
    portalRoot.appendChild(this.el);
  };

  // 如果組件從DOM中移除，那么我們也將其子元素移除
  componentWillUnmount = () => {
    portalRoot.removeChild(this.el);
  };

  // 啊，現(xiàn)在我們可以根據(jù)需要渲染組件及其子元素
  render() {
    const { children } = this.props;
    return ReactDOM.createPortal(children, this.el);
  }
}

當(dāng)然，render()可以渲染數(shù)字和字符串……

class App extends React.Component {
  render () {
    return "Hello World!"
  }
}

以及null或布爾值：

class App extends React.Component {
  render () {
    return null
  }
}

componentDidMount()

componentDidMount()這個(gè)名字是否說(shuō)明了它的含義？此方法在組件掛載（即連接到DOM）后調(diào)用。在我撰寫的另一篇關(guān)于在React中獲取數(shù)據(jù)的教程中，這就是您要向API發(fā)出請(qǐng)求以獲取數(shù)據(jù)的地方。

我們可以使用您的fetch方法：

fetchUsers() {
  fetch(`https://jsonplaceholder.typicode.com/users`)
    .then(response => response.json())
    .then(data =>
      this.setState({
        users: data,
        isLoading: false,
      })
    )
  .catch(error => this.setState({ error, isLoading: false }));
}

然后在componentDidMount()鉤子中調(diào)用該方法：

componentDidMount() {
  this.fetchUsers();
}

我們還可以添加事件監(jiān)聽(tīng)器：

componentDidMount() {
  el.addEventListener()
}

很簡(jiǎn)潔，對(duì)吧？

static getDerivedStateFromProps()

這是一個(gè)有點(diǎn)冗長(zhǎng)的名字，但static getDerivedStateFromProps()并不像聽(tīng)起來(lái)那么復(fù)雜。它在掛載階段的render()方法之前以及更新階段之前調(diào)用。它返回一個(gè)對(duì)象來(lái)更新組件的狀態(tài)，或者在沒(méi)有要更新的內(nèi)容時(shí)返回null。

為了理解它的工作原理，讓我們實(shí)現(xiàn)一個(gè)計(jì)數(shù)器組件，它將為其計(jì)數(shù)器狀態(tài)設(shè)置一個(gè)特定值。只有當(dāng)maxCount的值更高時(shí)，此狀態(tài)才會(huì)更新。maxCount將從父組件傳遞。

這是父組件：

class App extends React.Component {
  constructor(props) {
    super(props)

    this.textInput = React.createRef();
    this.state = {
      value: 0
    }
  }

  handleIncrement = e => {
    e.preventDefault();
    this.setState({ value: this.state.value   1 })
  };

  handleDecrement = e => {
    e.preventDefault();
    this.setState({ value: this.state.value - 1 })
  };

  render() {
    return (
      <react.fragment><p>Max count: { this.state.value }</p>
           
          -
        <counter maxcount="{this.state.value}"></counter></react.fragment>
    )
  }
}

我們有一個(gè)按鈕用于增加maxCount的值，我們將其傳遞給Counter組件。

class Counter extends React.Component {
  state={
    counter: 5
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.counter 
        <p>Count: {this.state.counter}</p>

      
    )
  }
}

在Counter組件中，我們檢查counter是否小于maxCount。如果是，我們將counter設(shè)置為maxCount的值。否則，我們什么也不做。

更新階段

當(dāng)組件的props或狀態(tài)更改時(shí)，會(huì)發(fā)生更新階段。與掛載一樣，更新也有自己的一組可用方法，我們接下來(lái)將介紹。也就是說(shuō)，值得注意的是，render()和getDerivedStateFromProps()也會(huì)在此階段觸發(fā)。

shouldComponentUpdate()

當(dāng)組件的狀態(tài)或props更改時(shí)，我們可以使用shouldComponentUpdate()方法來(lái)控制組件是否應(yīng)該更新。此方法在渲染發(fā)生之前以及接收狀態(tài)和props時(shí)調(diào)用。默認(rèn)行為為true。要每次狀態(tài)或props更改時(shí)都重新渲染，我們會(huì)這樣做：

shouldComponentUpdate(nextProps, nextState) {
  return this.state.value !== nextState.value;
}

當(dāng)返回false時(shí)，組件不會(huì)更新，而是調(diào)用render()方法來(lái)顯示組件。

getSnapshotBeforeUpdate()

我們可以做的一件事是在某個(gè)時(shí)間點(diǎn)捕獲組件的狀態(tài)，這就是getSnapshotBeforeUpdate()的設(shè)計(jì)目的。它在render()之后但提交任何新更改到DOM之前調(diào)用。返回值作為第三個(gè)參數(shù)傳遞給componentDidUpdate()。

它將先前狀態(tài)和props作為參數(shù)：

getSnapshotBeforeUpdate(prevProps, prevState) {
  // ...
}

在我看來(lái)，此方法的用例很少。它是一種您可能不會(huì)經(jīng)常使用到的生命周期方法。

componentDidUpdate()

將componentDidUpdate()添加到方法列表中，其中名稱大致說(shuō)明了所有內(nèi)容。如果組件更新，那么我們可以使用此方法在此時(shí)與它掛鉤，并將其傳遞給組件的先前props和狀態(tài)。

componentDidUpdate(prevProps, prevState) {
  if (prevState.counter !== this.state.counter) {
    // ...
  }
}

如果您曾經(jīng)使用過(guò)getSnapshotBeforeUpdate()，您還可以將返回值作為參數(shù)傳遞給componentDidUpdate()：

componentDidUpdate(prevProps, prevState, snapshot) {
  if (prevState.counter !== this.state.counter) {
    // ....
  }
}

卸載階段

我們?cè)谶@里幾乎看到了掛載階段的反面。正如您可能預(yù)期的那樣，卸載發(fā)生在組件從DOM中清除并且不再可用時(shí)。

我們這里只有一個(gè)方法：componentWillUnmount()

這在組件卸載和銷毀之前調(diào)用。這就是我們想要在組件離開(kāi)后執(zhí)行任何必要的清理的地方，例如刪除可能在componentDidMount()中添加的事件監(jiān)聽(tīng)器，或清除訂閱。

// 刪除事件監(jiān)聽(tīng)器
componentWillUnmount() {
  el.removeEventListener()
}

錯(cuò)誤處理階段

組件中可能會(huì)出現(xiàn)問(wèn)題，這可能會(huì)導(dǎo)致錯(cuò)誤。我們已經(jīng)有一段時(shí)間使用錯(cuò)誤邊界來(lái)幫助解決這個(gè)問(wèn)題。此錯(cuò)誤邊界組件使用一些方法來(lái)幫助我們處理可能遇到的錯(cuò)誤。

getDerivedStateFromError()

我們使用getDerivedStateFromError()來(lái)捕獲從子組件拋出的任何錯(cuò)誤，然后我們使用它來(lái)更新組件的狀態(tài)。

class ErrorBoundary extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return (
        <h1>Oops, something went wrong :(</h1>
      );
    }

    return this.props.children;
  }
}

在此示例中，當(dāng)從子組件拋出錯(cuò)誤時(shí)，ErrorBoundary組件將顯示“哎呀，出現(xiàn)了一些問(wèn)題”。

componentDidCatch()

雖然getDerivedStateFromError()適用于在發(fā)生副作用（如錯(cuò)誤日志記錄）的情況下更新組件的狀態(tài)，但我們應(yīng)該使用componentDidCatch()，因?yàn)樗谔峤浑A段調(diào)用，此時(shí)DOM已更新。

componentDidCatch(error, info) {
  // 將錯(cuò)誤記錄到服務(wù)
}

getDerivedStateFromError()和componentDidCatch()都可以在ErrorBoundary組件中使用：

class ErrorBoundary extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 將錯(cuò)誤記錄到服務(wù)
  }

  render() {
    if (this.state.hasError) {
      return (
        <h1>Oops, something went wrong :(</h1>
      );
    }

    return this.props.children;
  }
}

這就是React組件的生命周期！

了解React組件如何與DOM交互是一件很酷的事情。很容易認(rèn)為會(huì)發(fā)生一些“魔法”，然后頁(yè)面上就會(huì)出現(xiàn)一些東西。但是React組件的生命周期表明，這種瘋狂是有秩序的，它旨在賦予我們很大的控制權(quán)，以便從組件到達(dá)DOM到它消失的時(shí)間發(fā)生的事情。

我們?cè)谙鄬?duì)較短的空間內(nèi)涵蓋了很多內(nèi)容，但希望這能讓您很好地了解React如何處理組件，以及我們?cè)谔幚淼母鱾€(gè)階段擁有什么樣的能力。如果您對(duì)這里介紹的任何內(nèi)容不清楚，請(qǐng)隨時(shí)提出任何問(wèn)題，我很樂(lè)意盡力提供幫助！

以上是反應(yīng)生命周期的圓的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！