react监控props的变化

这篇文章还是有些含糊,建议后续补充一些 
第一次的加载不会加载这个对象
componentDidUpdate(prevProps, prevState) {} //生命周期,重新绘制就引起影响。
state和props的变化都会引起冲绘制
//这个有些问题 不建议使用
 
 第一次的加载不会加载这个对象
componentWillReceiveProps(){}
//建议使用这个生命周期
外侧重绘都会引起这个变化,state不会引起变化
 
1、外侧重绘
外侧的state的任何变化都会引起外侧重绘,而不是订阅
 
 const { title, subTitle, A2: th, local } = this.state;
 
 <A1 title={title} subTitle={subTitle} />
 
title和subTitle 的变化必然引起变化,但是A2,local 的变化必然引起变化。这是react的基础哲学
 
 
对于类组件,我们这么写
新版本的
1、外侧的重绘必然会调用这个函数
2、内侧的state的变化必然会调用这个函数
3、首次加载也会调用这个函数
 
  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]。除了a1的变化,第一次也会加载

2、第二个参数可以是useState的值。[counter] 除了counter的变化,第一次也会加载

3、第二个参数可以是[],不监控任何变化。只有第一次会加载

4、第二个参数可以什么都没有,就是没有参数,那么props和state的任何变化都会引起变化第一次会加载

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

 

 

 

posted on 2020-10-18 16:56  漫思  阅读(6477)  评论(0编辑  收藏  举报

导航