摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們將看看我們可以用于組件的一些最常見的生命周期鉤子函數(shù)，我們將討論為什么它們是有用的，什么時(shí)間應(yīng)該用什么。我們使用的一個(gè)更常見的生命周期鉤子是鉤子。這些是我們可以在框架中進(jìn)行交互的一些生命周期鉤子。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3827
原文：https://www.fullstackreact.com/30-days-of-react/day-7/

今天，我們將看看我們可以用于React組件的一些最常見的生命周期鉤子函數(shù)，我們將討論為什么它們是有用的，什么時(shí)間應(yīng)該用什么。

恭喜！我們已經(jīng)在React的第一周結(jié)束了，我們已經(jīng)覆蓋了這么多的基礎(chǔ)知識。我們剛剛完成了處理有狀態(tài)的組件來跟蹤組件的內(nèi)部狀態(tài)。今天，我們將暫停實(shí)施，并談一下應(yīng)用中的組件_lives_。也就是說，我們將討論組件的生命周期。

由于React裝載了我們的應(yīng)用，它為我們提供了一些鉤子，我們可以在組件生命周期的不同時(shí)間插入自己的功能。為了_hook into_到生命周期，我們需要在我們的組件上定義函數(shù)，每個(gè)鉤子在適當(dāng)?shù)臅r(shí)候?qū)ζ溥M(jìn)行調(diào)用。讓我們來看看第一個(gè)生命周期鉤子：

當(dāng)我們的應(yīng)用中的一個(gè)頁面上定義了一個(gè)組件時(shí)，在定義虛擬節(jié)點(diǎn)時(shí)，我們不能立即依賴它在DOM中可用。相反，我們必須等到組件本身在瀏覽器中實(shí)際上是_mounted_。對于我們需要運(yùn)行的功能，我們可以定義兩個(gè)不同的_hooks_（或函數(shù)）。在組件被裝載在頁面之前被調(diào)用的一個(gè)，在組件被裝載之后被調(diào)用的一個(gè)。

什么是 mounting?
由于我們使用React定義了我們的DOM樹中的節(jié)點(diǎn)的virtual representation，我們實(shí)際上并沒有定義DOM節(jié)點(diǎn)。相反，我們正在建立一個(gè)內(nèi)存視圖，React為我們維護(hù)和管理。當(dāng)我們談?wù)搈ounting時(shí)，我們談?wù)摰氖菍⑻摂M組件轉(zhuǎn)換為由React放置在DOM中的實(shí)際DOM元素的過程。

這對于諸如獲取數(shù)據(jù)來填充組件的事情非常有用。例如，假設(shè)我們想使用我們的活動(dòng)跟蹤器來顯示github事件。只有當(dāng)數(shù)據(jù)本身被渲染時(shí)，我們才想加載這些事件。

回想一下我們在我們的活動(dòng)列表中定義了我們的Content 組件

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      

        


        {/* Timeline item */}
        {activities.map((activity) => (
          
        ))}

      
    )
  }
}

讓我們更新Content 組件，向github.com events api發(fā)出請求，并使用響應(yīng)來顯示活動(dòng)。 因此，我們需要更新對象的state 。

就像我們昨天做的那樣，我們通過在構(gòu)造函數(shù)中將this.state 設(shè)置為一個(gè)對象來更新我們的組件為狀態(tài)

class Content extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activities: []
    }
  }

  // ...
}

現(xiàn)在，當(dāng)組件本身準(zhǔn)備裝載（或裝載之后）時(shí)，我們將要發(fā)出一個(gè)HTTP請求。通過在我們的組件中定義函數(shù)componentWillMount() （或componentDidMount()），React將在DOM中裝載該方法之前運(yùn)行該方法。 這是我們添加 GET 請求的完美的地方。

讓我們更新content組件，并請求github api。 由于我們只想顯示一個(gè)小列表，我們來看最新的四個(gè)活動(dòng)。

我們已經(jīng)存儲了一個(gè)github數(shù)據(jù)的靜態(tài)JSON文件，我們將直接從源碼（我們將在幾天內(nèi)使用AJAX請求）使用promises。 現(xiàn)在，讓我們重點(diǎn)介紹如何使用新的數(shù)據(jù)實(shí)現(xiàn)更新組件：

class Content extends React.Component {
  // ...
  componentWillMount() {
    this.setState({activities: data});
  }
  // ...
}

請注意，我們沒有從我們的Content 組件更改任何內(nèi)容，它正常工作了。

有時(shí)我們會(huì)在更改實(shí)際呈現(xiàn)之前或之后更新我們組件的一些數(shù)據(jù)。 例如，假設(shè)當(dāng)組件的屬性更改時(shí)，我們要調(diào)用一個(gè)函數(shù)來設(shè)置渲染或調(diào)用一個(gè)函數(shù)集。 componentWillUpdate() 方法是一個(gè)合理的鉤子來處理我們的組件進(jìn)行更改（只要我們不調(diào)用this.setState() 來處理它，因?yàn)樗鼤?huì)導(dǎo)致無限循環(huán)）。

由于我們真的不需要深入處理這個(gè)問題，所以我們不用擔(dān)心在這里設(shè)置一個(gè)例子，但是很高興知道它存在。 我們使用的一個(gè)更常見的生命周期鉤子是componentWillReceiveProps() 鉤子。

當(dāng)組件即將接收新的props時(shí)，React會(huì)調(diào)用一個(gè)方法。 這是當(dāng)組件將要接收一組新的屬性時(shí)將被調(diào)用的第一種方法。 定義這種方法是尋找特定props 更新的好時(shí)機(jī)，因?yàn)樗刮覀冇袡C(jī)會(huì)計(jì)算更改并更新組件的內(nèi)部狀態(tài)。

這時(shí)我們可以根據(jù)新屬性更新我們的狀態(tài)。

這里要注意的一點(diǎn)是，即使componentWillReceiveProps() 方法被調(diào)用，props 的值可能沒有更改。 總是 檢查prop值的變化是一個(gè)好主意。

例如，讓我們添加一個(gè)_刷新_按鈕到我們的活動(dòng)列表，以便我們的用戶可以請求重新請求github事件api。

我們將使用componentWillReceiveProps() 鉤子來要求組件重新加載它的數(shù)據(jù)。 由于我們的組件是有狀態(tài)的，我們將要使用新數(shù)據(jù)刷新此狀態(tài)，因此我們不能簡單地更新組件中的props 。 我們可以使用componentWillReceiveProps() 方法來_告訴_我們要刷新的組件。

我們在我們的包含元素上添加一個(gè)按鈕，該元素傳遞一個(gè)requestRefresh布爾屬性來告訴Content組件刷新。

class Container extends React.Component {
  constructor(props) {
    super(props);

    this.state = {refreshing: false}
  }

  // Bound to the refresh button
  refresh() {
    this.setState({refreshing: true})
  }

  // Callback from the `Content` component
  onComponentRefresh() {
    this.setState({refreshing: false});
  }

  render() {
    const {refreshing} = this.state;
    return (
      

        

          

          {/* refreshing is the component"s state */}
          
          {/* A container for styling */}
          
        

      

    )
  }
}

class Content extends React.Component {
  // ...
  componentWillReceiveProps(nextProps) {
    // Check to see if the requestRefresh prop has changed
    if (nextProps.requestRefresh !== this.props.requestRefresh) {
      this.setState({loading: true}, this.updateData);
    }
  }
  // ...
}

此演示使用JSON文件中的靜態(tài)數(shù)據(jù)，并在刷新時(shí)隨機(jī)挑選四個(gè)元素。 這被設(shè)置為simulate刷新。

import React from "react"

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = this.getTime();
  }

  componentDidMount() {
    this.setTimer();
  }

  setTimer() {
    this.timeout = setTimeout(this.updateClock.bind(this), 1000);
  }

  updateClock() {
    this.setState(this.getTime, this.setTimer);
  }

  getTime() {
    const currentTime = new Date();
    return {
      hours: currentTime.getHours(),
      minutes: currentTime.getMinutes(),
      seconds: currentTime.getSeconds(),
      ampm: currentTime.getHours() >= 12 ? "pm" : "am"
    }
  }

  // ...
  render() {

  }
}

export default Clock

class Clock extends React.Component {
  // ...
  componentWillUnmount() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  }
  // ...
}