React組件在其應(yīng)用生命週期中會經(jīng)歷不同的階段，儘管幕後發(fā)生的事情可能並不明顯。

這些階段包括：

• 掛載
• 更新
• 解除安裝
• 錯誤處理

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

了解不同的生命週期方法對於React應(yīng)用程序的開發(fā)至關(guān)重要，因為它允許我們在需要時精確地觸發(fā)操作，而不會與其他操作混淆。本文將介紹每個生命週期，包括可用的方法以及我們使用它們的場景類型。

掛載階段

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

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

constructor()

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

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

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

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

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

render()

render()方法是組件的標記在前端顯示的地方。用戶此時可以看到並訪問它。如果您曾經(jīng)創(chuàng)建過React組件，那麼您已經(jīng)熟悉它了——即使您沒有意識到——因為它需要輸出標記。

 class App extends React.Component {
  // 掛載過程中，請渲染以下內(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>
    )
  }
}

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

 // 我們正在創(chuàng)建一個門戶，允許組件在DOM中移動class Portal extends React.Component {
  // 首先，我們創(chuàng)建一個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);
  }
}

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

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

以及null或布爾值：

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

componentDidMount()

componentDidMount()這個名字是否說明了它的含義？此方法在組件掛載（即連接到DOM）後調(diào)用。在我撰寫的另一篇關(guān)於在React中獲取數(shù)據(jù)的教程中，這就是您要向API發(fā)出請求以獲取數(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)聽器：

 componentDidMount() {
  el.addEventListener()
}

很簡潔，對吧？

static getDerivedStateFromProps()

這是一個有點冗長的名字，但static getDerivedStateFromProps()並不像聽起來那麼複雜。它在掛載階段的render()方法之前以及更新階段之前調(diào)用。它返回一個對象來更新組件的狀態(tài)，或者在沒有要更新的內(nèi)容時返回null 。

為了理解它的工作原理，讓我們實現(xiàn)一個計數(shù)器組件，它將為其計數(shù)器狀態(tài)設(shè)置一個特定值。只有當maxCount的值更高時，此狀態(tài)才會更新。 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>
    )
  }
}

我們有一個按鈕用於增加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的值。否則，我們什麼也不做。

更新階段

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

shouldComponentUpdate()

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

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

當返回false時，組件不會更新，而是調(diào)用render()方法來顯示組件。

getSnapshotBeforeUpdate()

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

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

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

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

componentDidUpdate()

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

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

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

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

卸載階段

我們在這裡幾乎看到了掛載階段的反面。正如您可能預(yù)期的那樣，卸載發(fā)生在組件從DOM中清除並且不再可用時。

我們這裡只有一個方法： componentWillUnmount()

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

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

錯誤處理階段

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

getDerivedStateFromError()

我們使用getDerivedStateFromError()來捕獲從子組件拋出的任何錯誤，然後我們使用它來更新組件的狀態(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;
  }
}

在此示例中，當從子組件拋出錯誤時， ErrorBoundary組件將顯示“哎呀，出現(xiàn)了一些問題”。

componentDidCatch()

雖然getDerivedStateFromError()適用於在發(fā)生副作用（如錯誤日誌記錄）的情況下更新組件的狀態(tài)，但我們應(yīng)該使用componentDidCatch() ，因為它在提交階段調(diào)用，此時DOM已更新。

 componentDidCatch(error, info) {
  // 將錯誤記錄到服務(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) {
    // 將錯誤記錄到服務(wù)}

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

    return this.props.children;
  }
}

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

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

我們在相對較短的空間內(nèi)涵蓋了很多內(nèi)容，但希望這能讓您很好地了解React如何處理組件，以及我們在處理的各個階段擁有什麼樣的能力。如果您對這裡介紹的任何內(nèi)容不清楚，請隨時提出任何問題，我很樂意盡力提供幫助！

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