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
第一次加载都会触达
监控比较精确,不像其他两者那么不精确,非常精确的监控变量的变化
顾名思义,执行副作用钩子。主要用于以下两种情况:
- 函数式组件中不存在传统类组件生命周期的概念,如果我们需要在一些特定的生命周期或者值变化后做一些操作的话,必须借助
useEffect
的一些特性去实现。 useState
产生的 changeState 方法并没有提供类似于setState
的第二个参数一样的功能,因此如果需要在 State 改变后执行一些方法,必须通过useEffect
实现。
该钩子接受两个参数,第一个参数为副作用需要执行的回调,生成的回调方法可以返回一个函数(将在组件卸载时运行);第二个为该副作用监听的状态数组,当对应状态发生变动时会执行副作用,如果第二个参数为空,那么在每一个 State 变化时都会执行该副作用。
尤其是注意第二个参数。
1、第二个参数可以是props的值。[props.a1]。除了a1的变化,第一次也会加载
2、第二个参数可以是useState的值。[counter] 除了counter的变化,第一次也会加载
3、第二个参数可以是[],不监控任何变化。只有第一次会加载
4、第二个参数可以什么都没有,就是没有参数,那么props和state的任何变化都会引起变化。第一次会加载
目前已经全面覆盖所有的点。
漫思