目錄

生命週期

理解

方法

//建構函式
constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
//生命週期的方法(此處按照先後順序寫)：

  componentWillMount(){ 
    //在渲染前呼叫
  }

  componentDidMount() {
    //在第一次渲染後呼叫，只在客戶端。之後元件已經生成了對應的DOM結構。常用於初始render後獲得資料，開啟定時器。
  }

  componentWillReceiveProps (){
    //在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。
  }
 


  shouldComponentUpdate (){
    //返回一個布林值。在元件接收到新的props或者state時被呼叫。
  }

  componentWillUpdate(){
    //在元件接收到新的props或者state但還沒有render時被呼叫。在初始化時不會被呼叫。
  }

  componentDidUpdate (){
    //在元件完成更新後立即呼叫。在初始化時不會被呼叫。
  }

  componentWillUnmount(){
    //在元件從 DOM 中移除的時候立刻被呼叫。常用於clear執行緒，定時器。
  }

狀態（跟微信小程式裡的setdata大同小異）

不能直接更改狀態

不能直接使用this.state賦值，而是使用this.setState如下例子

this.setState({comment: 'Hello'});

不建議在setState中回撥state

建議使用以前一個狀態（prevState）作為第一個引數的回撥可以避免這種情況

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

狀態更新可能是非同步的

this.props和this.state可能是非同步更新的，因此不該依靠他們的值立馬來計算下一個狀態

this.setState({
  counter: this.state.counter + this.props.increment,
});

解決方法：使用第二種形式的 setState() 來接受一個函式而不是一個物件。 該函式將接收先前的狀態作為第一個引數，將此次更新被應用時的props做為第二個引數

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

資料自頂向下流動（單向資料流）

理解單向資料流： 任何狀態始終由某些特定元件所有，並且從該狀態匯出的任何資料或 UI 只能影響樹中下方的元件（狀態通常被認為是區域性或封裝在一個元件。 除了擁有並設定它的元件外，其它元件不可訪問）。元件間得知狀態，也只能通過父子元件間的通訊實現。

快捷連結