在react中通過state以及setState() 來(lái)控制組件的狀態(tài)。

state

state 是 react 中用來(lái)存儲(chǔ)組件數(shù)據(jù)狀態(tài)的，可以類比成 vue 中的 data。

setState()

與 vue 中不同的是 state 不能直接被修改，需要通過 setState() 的方法去修改。

1. setState() 更新組件狀態(tài)之后不會(huì)立即生效，react 為提高性能會(huì)按批次更新 state 然后 render, 即異步操作，所以setSate() 之后立即去取state的值并不是更新之后的狀態(tài)。
2. setState() 第一個(gè)參數(shù)接受兩種類型的參數(shù)，Object以及Function
   1. Object

      this.setState({
          msg: '更新state msg'
      })
      

      當(dāng)參數(shù)是Object的時(shí)候, 可以即為對(duì)應(yīng) state 中的 key, value 即是新的值。
   2. Function
      當(dāng)參數(shù)是函數(shù)的時(shí)候，setState()會(huì)將上一個(gè)setState()的結(jié)果作為參數(shù)傳入這個(gè)函數(shù)

      ...
      constructor () {
          this.state = { counter: 0 }
      }
      add() {
          this.setState({ counter: this.state.counter + 1 })
          this.setState({ counter: this.state.counter + 1 }) // 此時(shí)`this.state.counter`的值還是初始值0,，所以這個(gè)操作是無(wú)效的
          this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 為上次更新之后的值，即是1
      }
      ...
      

3. setState() 第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，表示 state 更新完成

   this.setState({
       msg: '更新state msg'
   }, () => {
       console.log('state 更新完畢')
   })
   

   根據(jù)這個(gè)可以使用Promise以及async/await,封裝成同步操作

   setStateAsync(state) {
       return new Promise(resolve => {
           this.setState(state, resolve)
       })
   }
   // 使用
   async add() {
       await setStateAsync({ counter: this.state.counter + 1 })
       console.log('state 更新完畢')
   }
   

感謝您的閱讀，本文由 趙的拇指 版權(quán)所有。原文地址： https://www.zhaofinger.com/detail/11