摘要：無論何時狀態(tài)改變通過，組件將重新投遞。在調(diào)用函數(shù)之后，我們可以將第二個參數(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)組件的工作原理，并且看看我們何時以及為什么要使用狀態(tài)。

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

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

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

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

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

例如，假設我們有一個簡單的時鐘組件來顯示當前時間：

即使這是一個簡單的時鐘組件，它確實保留狀態(tài)，因為它需要知道當前顯示的時間。沒有使用state，我們可以設置一個計時器并重新渲染整個React組件，但頁面上的其他組件可能不需要重新渲染…這將是一個頭痛的問題。

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

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

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 組件，我們只會在組件本身重新運行時獲得時間。這不是一個非常有用的時鐘（還）。為了將靜態(tài)時間顯示Clock 組件轉(zhuǎn)換為顯示時間的時鐘，我們需要每秒更新一次。

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

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

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

現(xiàn)在我們this.state 在Clock 組件中有一個定義，我們可以在 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 組件中，我們使用本機setTimeout() JavaScript函數(shù)創(chuàng)建一個定時器，以this.state 在1000毫秒內(nèi)更新對象。我們將把這個功能放在一個函數(shù)中，我們再次調(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é)中介紹生命周期中的鉤子，但是為了簡單起見，我們暫時將其簡稱為constructor() 。

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

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

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

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

現(xiàn)在，組件本身可能會比超時功能再次調(diào)用慢，這將導致重新出現(xiàn)的瓶頸，并且不必要地在移動設備上使用寶貴的電池。在調(diào)用setTimer() 函數(shù)之后this.setState()，我們可以將第二個參數(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é)中我們一直在研究的活動列表中更新我們的組件。當用戶點擊search 圖標，我們將要顯示組件。

嘗試一下！點擊下面的搜索圖標：(想要有效果還是去原文體驗吧?)

知道我們現(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 */}
        

      
    )
  }
}

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

我們通常只想在我們的狀態(tài)中保持我們將在該render() 函數(shù)中使用的值。從上面我們的時鐘的例子，請注意，我們的存儲hours,minutes,以及seconds 在我們的狀態(tài)。在我們不打算在render功能中使用的狀態(tài)下存儲對象或計算通常是一個壞主意，因為它可能導致不必要的渲染和浪費的CPU周期。

正如我們在本節(jié)頂部指出的那樣，props不僅出于性能原因，最好使用，但是因為有狀態(tài)的組件更難測試。

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

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

const MenuButton = (props) => (
  

    

    

    

  
)