如何定義state

在類組件中，在constructor()中使用this.state={}來定義

class A extends Component {

  constructor (props) {
    super(props)  // 呼叫Component的建構式
    // 定義state
    this.state = {
      num: 1
    }
  }
}

在函陣列件中，自React(16.8)版本以后，使用useState()來定義，

function B (props) {
  // 定義state宣告式變數
  let [num, setNum] = useState(1)
}

如何使用state

在類組件中，使用this.state訪問宣告式變數，
在函陣列件中，直接訪問useState的結果，

如何修改state宣告式變數

在類組件中，使用this.setState()方法來修改，

class A extends Component {

  constructor (props) {
    super(props)  // 呼叫Component的建構式
    // 定義state
    this.state = {
      num: 1
    }
  }
     this.setState(state=>({num: state.num + 1}), ()=>            
    {console.log( this.state.num)})
  }
}

在函陣列件中，使用useState()回傳值的第二個引數（set*）方法來修改，

function B (props) {
  // 定義state宣告式變數
  let [num, setNum] = useState(1)
   const add = () => {
    console.log('1--- num', num)
    // 如果這里是React(V17)中，在合成事件中是異步的，如果在宏任務或    
   Promise.then()是同步的，
    // 如果這里是React(18)，無論在哪里都是異步的，
    // useState()給的這種set*方法，是沒有callback的，
    // setNum(num + 1)
    setNum(num => num + 10)
    console.log('2--- num', num)
  }  
}

this.setStaate()的兩種寫法

this.setState({},callback)當我們修改state時，如果舊值與新值無關，建議使用這種寫法，
this.setState((state)=>{},callback)當我們修改state時，如果舊值與新值有關，建議使用這種寫法，

this.setState()的異步性

在React(v17/v16)中，this.setState()在合成事件（事件，生命周期中）是異步的；在宏任務、promise.then()中是同步的，
在React(v18)中，無論this.setState()在哪里都是異步的，這種特性，被稱之為“并發模式”，
this.setState()定為異步是為了性能優化，

this.setState()自動合并

在同一個函式域中，多個this.setState()會自動合并，以減少沒必要的diff運算(協調運算)；自動合并的規則是一種淺合并，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501815.html

標籤：其他

上一篇：vue 將markdown字串轉html、修改主題、生成目錄

下一篇：React生命周期和回應式原理(Fiber架構)