通過state控制頁面元素的變化，類似於vue中的data

setState會引發檢視的重繪

1. 如何在專案中新增state

   在類中新增一個constructor函式,然後給狀態賦值。注意 super()必須執行，可以帶引數也可以不帶，引數為父元件傳下來的props。

   export default class LifeCycleDemo extends React.Component {
    constructor (props) {
     super(props)
     this.state = {
      count: '我是元件狀態'
      }
     }
    ...
   }

2. 修改狀態： this.setState()

   • 通過this.state.data= 'name'的方式給state賦值只能出現在constructor函式中

   this.setState({
    count: '我修改了元件狀態'
   })

   • 當有多個狀態批量修改的時候，建議在setState()傳入函式。因為他們值得改變是非同步的，你不能依賴他們的值得到下counter的值

   // Wrong
   this.setState({
    counter: this.state.counter + this.props.increment,
   })
   ​
   // Correct 也可以不用箭頭函式。函式接收兩個引數： 未更改前的狀態， 第二個引數是父元件傳進來的props
   this.setState((state, props) => ({
    counter: state.counter + props.increment
   }))
    
   

   注意：引數傳函式的方式只能用在 componentWillMount和componentDidMount鉤子中。且回撥函式的兩個引數是確定的

3. this.setState()同步和非同步的執行的問題

   在可控的情況下非同步執行，在不可控的情況下同步執行。比如發起非同步請求，通過請求返回的資料改變狀態，我們不知道請求什麼時候完成，這時就得請求完成改變狀態後就開始對比重新渲染DOM樹；但像有些情況，比如用定時器更改狀態值，在知道狀態什麼時候會改變，就會等所有的改變完成後才對比渲染頁面，這樣就減少因此多次顯然頁面造成的效能問題

4. 在可控的情況下，將非同步執行的setState改成同步執行

5. 狀態提升

   將子元件中都用到的狀態提升到父元件，由父元件統一管理

   元件中的狀態共用形式：父傳子（props）、子傳父（子元件觸發父元件的自定義事件，然後父元件自己改變狀態）、兩個元件共用相同的父元件或者子元件