react監控props的變化

componentDidUpdate(prevProps, prevState) {

 

對於類組件，我們這么寫

新版本的

  static getDerivedStateFromProps(props, state) {

    if (props.type !== state.type) {

      let { type } = props;

      console.log('我發生了變化');

      return {

        type, //把父組件最新的props.type重新賦值到 子組件state.type

      };

    }

    // 父組件的值沒有變化，這里不做任何操作。

    return null;

  }

函數組件的話

useEffect

顧名思義，執行副作用鈎子。主要用於以下兩種情況：

1. 函數式組件中不存在傳統類組件生命周期的概念，如果我們需要在一些特定的生命周期或者值變化后做一些操作的話，必須借助 useEffect 的一些特性去實現。
2. useState 產生的 changeState 方法並沒有提供類似於 setState 的第二個參數一樣的功能，因此如果需要在 State 改變后執行一些方法，必須通過 useEffect 實現。

該鈎子接受兩個參數，第一個參數為副作用需要執行的回調，生成的回調方法可以返回一個函數（將在組件卸載時運行）；第二個為該副作用監聽的狀態數組，當對應狀態發生變動時會執行副作用，如果第二個參數為空，那么在每一個 State 變化時都會執行該副作用。

 

尤其是注意第二個參數。

1、第二個參數可以是props的值。[props.a1]

2、第二個參數可以是useState的值。[counter]

3、第二個參數可以是[],不監控任何變化，只是第一次這么搞。

4、第二個參數可以什么都沒有，就是沒有參數，那么props和state的任何變化都會引起變化。

目前已經全面覆蓋所有的點。