摘要：無論何時(shí)狀態(tài)改變通過，組件將重新投遞。在調(diào)用函數(shù)之后，我們可以將第二個(gè)參數(shù)傳遞給函數(shù)，該函數(shù)將在狀態(tài)更新后保證被調(diào)用。今天，我們更新了我們的組件以使其處于狀態(tài)狀態(tài)，現(xiàn)在有必要處理如何使組件成為狀態(tài)。

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

今天我們開始了解React中有狀態(tài)組件的工作原理，并且看看我們何時(shí)以及為什么要使用狀態(tài)。

我們幾乎完成了在React開始運(yùn)行的第一周。我們通過JSX工作，構(gòu)建我們的第一個(gè)組件，設(shè)置父子關(guān)系，并使用React驅(qū)動(dòng)組件屬性。我們還有一個(gè)重要的想法，我們還沒有討論React _狀態(tài)_相關(guān)的知識(shí)。

React并沒有讓我們修改this.props 我們有充分的理由的組件。想象一下，如果我們將 title 屬性支持傳遞給Header 組件，并且Header 組件能夠修改它。我們?nèi)绾沃?b>title 是Header 組件的什么 ？我們?cè)O(shè)置了競(jìng)爭(zhēng)條件，混亂的數(shù)據(jù)狀態(tài)，并且將是一個(gè)全面的壞主意，修改由父組件傳遞給我們的變量并在小孩中修改。

然而，有時(shí)組件需要能夠更新自己的狀態(tài)。例如，active 在秒表上設(shè)置標(biāo)志或更新計(jì)時(shí)器。

雖然最好props 盡可能多地使用，但有時(shí)我們需要堅(jiān)持組件的狀態(tài)。為了處理這個(gè)問題，React使我們有能力在組件中擁有_狀態(tài)_。

組件里的state 意圖完全是內(nèi)部的組件，它的孩子（即組件和任何孩子使用它訪問）。類似于我們?nèi)绾?b>props 在組件中訪問，可以通過this.state 組件訪問狀態(tài)。無論何時(shí)狀態(tài)改變（通過 this.setState() ），組件將重新投遞。

例如，假設(shè)我們有一個(gè)簡(jiǎn)單的時(shí)鐘組件來顯示當(dāng)前時(shí)間：

即使這是一個(gè)簡(jiǎn)單的時(shí)鐘組件，它確實(shí)保留狀態(tài)，因?yàn)樗枰喇?dāng)前顯示的時(shí)間。沒有使用state，我們可以設(shè)置一個(gè)計(jì)時(shí)器并重新渲染整個(gè)React組件，但頁(yè)面上的其他組件可能不需要重新渲染…這將是一個(gè)頭痛的問題。

相反，我們可以設(shè)置一個(gè)計(jì)時(shí)器來調(diào)用組件內(nèi)部的rerender并更改此組件的內(nèi)部狀態(tài)。

我們來建立這個(gè)組件。首先，我們將創(chuàng)建我們將要調(diào)用的組件Clock。在進(jìn)入狀態(tài)之前，我們來構(gòu)建組件并創(chuàng)建該render() 函數(shù)。我們需要考慮數(shù)字，如果數(shù)字小于10，在數(shù)字前面加上一個(gè)零（0)，并進(jìn)行相應(yīng)的設(shè)置 am/pm 。 render()函數(shù)的最終結(jié)果可能如下所示：

class Clock extends React.Component {
  render() {
    const currentTime = new Date(),
          hours = currentTime.getHours(),
          minutes = currentTime.getMinutes(),
          seconds = currentTime.getSeconds(),
          ampm = hours >= 12 ? "pm" : "am";

    return (
      

        {
          hours == 0 ? 12 :
            (hours > 12) ?
              hours - 12 : hours
        }:{
          minutes > 9 ? minutes : `0${minutes}`
        }:{
          seconds > 9 ? seconds : `0${seconds}`
        } {ampm}
      
    )
  }
}
// ...
export default Clock

如果我們渲染我們的新Clock 組件，我們只會(huì)在組件本身重新運(yùn)行時(shí)獲得時(shí)間。這不是一個(gè)非常有用的時(shí)鐘（還）。為了將靜態(tài)時(shí)間顯示Clock 組件轉(zhuǎn)換為顯示時(shí)間的時(shí)鐘，我們需要每秒更新一次。

為了做到這一點(diǎn)，我們需要跟蹤組件狀態(tài)下的_current_ 時(shí)間。 為此，我們需要設(shè)置初始狀態(tài)值。 在ES6類樣式中，我們可以通過將this.state 設(shè)置為一個(gè)值來設(shè)置constructor() 中組件的初始狀態(tài)。

constructor(props) {
    super(props);
    this.state = this.getTime();
}

構(gòu)造函數(shù)的第一行應(yīng)該_始終_調(diào)用 super(props)。如果您忘記了這一點(diǎn)，組件將不會(huì)非常喜歡（即會(huì)有錯(cuò)誤）。

現(xiàn)在我們this.state 在Clock 組件中有一個(gè)定義，我們可以在 render() 函數(shù)中引用它this.state。讓我們更新我們的 render() 函數(shù)this.state來獲取以下值：

class Clock extends React.Component {
  // ...
  render() {
    const {hours, minutes, seconds, ampm} = this.state;
    return (
      

        {
          hours === 0 ? 12 :
            (hours > 12) ?
              hours - 12 : hours
        }:{
          minutes > 9 ? minutes : `0${minutes}`
        }:{
          seconds > 9 ? seconds : `0${seconds}`
        } {ampm}
      
    )
  }
}

我們現(xiàn)在可以更新 state 組件而不是直接使用數(shù)據(jù)值。為了更新狀態(tài)，我們將使用該函數(shù) this.setState()，這將觸發(fā)組件重新渲染。

在我們的Clock 組件中，我們使用本機(jī)setTimeout() JavaScript函數(shù)創(chuàng)建一個(gè)定時(shí)器，以this.state 在1000毫秒內(nèi)更新對(duì)象。我們將把這個(gè)功能放在一個(gè)函數(shù)中，我們?cè)俅握{(diào)用它。

class Clock extends React.Component {
  // ...
  constructor(props) {
    super(props);
    this.state = this.getTime();
  }
  // ...
  setTimer() {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(this.updateClock.bind(this), 1000);
  }
  // ...
  updateClock() {
    this.setState(this.getTime, this.setTimer);
  }
  // ...
}

我們將在下一節(jié)中介紹生命周期中的鉤子，但是為了簡(jiǎn)單起見，我們暫時(shí)將其簡(jiǎn)稱為constructor() 。

在該 updateClock() 函數(shù)中，我們將要在新時(shí)間內(nèi)更新狀態(tài)。我們現(xiàn)在可以在 updateClock() 函數(shù)中更新狀態(tài)：

class Clock extends React.Component {
  // ...
  updateClock() {
    this.setState(this.getTime, this.setTimer);
  }
  // ...
}

該組件將安裝在頁(yè)面上，并在（大約）一秒鐘（1000毫秒）內(nèi)更新當(dāng)前時(shí)間。但是，它不會(huì)再重新設(shè)置。我們可以在setTimer()函數(shù)結(jié)束時(shí)再次調(diào)用該函數(shù)：

class Clock extends React.Component {
  // ...
  updateClock() {
    const currentTime = new Date();
    this.setState({
      currentTime: currentTime
    })
    this.setTimer();
  }
  // ...
}

現(xiàn)在，組件本身可能會(huì)比超時(shí)功能再次調(diào)用慢，這將導(dǎo)致重新出現(xiàn)的瓶頸，并且不必要地在移動(dòng)設(shè)備上使用寶貴的電池。在調(diào)用setTimer() 函數(shù)之后this.setState()，我們可以將第二個(gè)參數(shù)傳遞給this.setState()函數(shù)，該函數(shù)將在狀態(tài)更新_后_保證被調(diào)用。

class Clock extends React.Component {
  // ...
  updateClock() {
    const currentTime = new Date();
    this.setState({
      currentTime: currentTime
    }, this.setTimer);
  }
  // ...
}

我們可以Header 在上一節(jié)中我們一直在研究的活動(dòng)列表中更新我們的組件。當(dāng)用戶點(diǎn)擊search 圖標(biāo)，我們將要顯示組件。

嘗試一下！點(diǎn)擊下面的搜索圖標(biāo)：(想要有效果還是去原文體驗(yàn)吧?)

知道我們現(xiàn)在知道的是，現(xiàn)在 this.state 我們可以更新視圖來添加條件呈現(xiàn)

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

    this.state = {
      searchVisible: false
    }
  }

  // toggle visibility when run on the state
  showSearch() {
    this.setState({
      searchVisible: !this.state.searchVisible
    })
  }

  render() {
    // Classes to add to the  element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    return (
      

        

        
          {this.props.title}
        

        

        {/* Adding an onClick handler to call the showSearch button */}
        

      
    )
  }
}

當(dāng)我們調(diào)用this.setState() 一個(gè)對(duì)象參數(shù)時(shí)，它將執(zhí)行一個(gè)數(shù)據(jù)的_淺合并_到可用的對(duì)象中this.setState() ，然后重新渲染組件。

我們通常只想在我們的狀態(tài)中保持我們將在該render() 函數(shù)中使用的值。從上面我們的時(shí)鐘的例子，請(qǐng)注意，我們的存儲(chǔ)hours,minutes,以及seconds 在我們的狀態(tài)。在我們不打算在render功能中使用的狀態(tài)下存儲(chǔ)對(duì)象或計(jì)算通常是一個(gè)壞主意，因?yàn)樗赡軐?dǎo)致不必要的渲染和浪費(fèi)的CPU周期。

正如我們?cè)诒竟?jié)頂部指出的那樣，props不僅出于性能原因，最好使用，但是因?yàn)橛袪顟B(tài)的組件更難測(cè)試。

今天，我們更新了我們的組件以使其處于狀態(tài)狀態(tài)，現(xiàn)在有必要處理如何使組件成為狀態(tài)。明天我們將進(jìn)入組件的生命周期，何時(shí)/如何與頁(yè)面進(jìn)行交互。

上面提到的組件在代碼庫(kù)中，只是為菜單按鈕提供了一個(gè)很好的顯示。

const MenuButton = (props) => (
  

    

    

    

  
)