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的任何变化都会引起变化。

目前已经全面覆盖所有的点。