建筑工程网教,旺道seo推广有用吗,路飞 wordpress,域名备案查询网址目录
1、第一个参数#xff1a; 2、第二个参数#xff1a;
2.1 不传值#xff1a;无限循环
2.2 空数组作为依赖#xff1a;执行一次
2.3 基本类型作为依赖#xff1a;无限循环
2.4 引用类型
2.4.1 数组作为依赖#xff1a;无限循环 2.4.2 函数作为依赖#…目录
1、第一个参数 2、第二个参数
2.1 不传值无限循环
2.2 空数组作为依赖执行一次
2.3 基本类型作为依赖无限循环
2.4 引用类型
2.4.1 数组作为依赖无限循环 2.4.2 函数作为依赖无限循环 2.4.3 对象作为依赖无限循环 1、第一个参数 是一个函数必传项。是组件要执行的副作用。可以看做componentDidMountcomponentDidUpdate 和 componentWillUnmount 这三个函数的组合。 const [count, setCount] useState(0);useEffect(() {// 普通函数执行副作用可以实现componentDidMount、componentDidUpdateconsole.log(执行副作用); // return函数, 组件销毁时清除副作用可以实现componentWillUnmountreturn () { console.log(清除副作用);};
}, [count]); 2、第二个参数 可以不传或者是一个数组非必传项。数组里面依赖改变时候副作用函数才会重新更新。 所谓依赖改变就是 对比 [ 之前值 之后值 ] 如果为true不执行useEffect为false重新执行useEffect 第二个参数类型不传、[]、由基本类型或者引用类型组成的数组 2.1 不传值无限循环 【现象】 useEffectuseEffectuseEffect 会在第一次渲染以及每次更新渲染后都执行 【原因】 第一次渲染后执行一次useEffectuseEffect中回调函数改变state值state值改变触发组件重新渲染useEffect没有比较值useEffect重新执行useEffect中回调函数改变state值state值改变触发组件重新渲染无限循环 注意不传值是一种缺失依赖关系的情况不建议这么做。 const [count, setCount] useStatenumber(1);
useEffect(() {setTimeout(() {setCount(count 1);}, 1000);console.log(第二个参数: 不传值, 第 ${count} 次执行);
});// 打印log无限循环
第二个参数: 不传值, 第 1 次执行
第二个参数: 不传值, 第 2 次执行
第二个参数: 不传值, 第 3 次执行
第二个参数: 不传值, 第 ... 次执行 2.2 空数组作为依赖执行一次 【现象】 useEffect 会在第一次渲染后执行一次 【原因】 第一次渲染后执行一次一次useEffectuseEffect中回调函数改变state值state值改变触发组件重新渲染useEffect中 [] 没有值依赖没变不触发useEffect不执行回调函数, state 无更新不触发组件重新渲染至此结束 const [count, setCount] useStatenumber(1);
useEffect(() {setTimeout(() {setCount(count 1);}, 1000);console.log(第二个参数: 空数组, 第 ${count} 次执行);
}, []);// 打印log执行一次
第二个参数: 空数组, 第 1 次执行 2.3 基本类型作为依赖无限循环 基本类型有整型、浮点型、布尔型truefalse、字符型、字符串、空值或nullNull 【现象】 useEffect 会在第一次渲染以及每次更新渲染后都执行。 【原因】 第一次渲染后执行一次useEffectuseEffect中回调函数改变state值state值改变触发组件重新渲染useEffect比较值count改变useEffect重新执行useEffect中回调函数改变state值state值改变触发组件重新渲染无限循环。 注意传入第二个参数只有一个值比较该值有变化就执行如果有多个值的数组会比较每一个值有一个变化就执行 const [count, setCount] useStatenumber(1); // 基本类型以number为例
useEffect(() {setTimeout(() {setCount(count 1);}, 1000);console.log(第二个参数: 基本类型, 第 ${count} 次执行);
}, [count]);// 打印log无限循环
第二个参数: 基本类型, 第 1 次执行
第二个参数: 基本类型, 第 2 次执行
第二个参数: 基本类型, 第 3 次执行
第二个参数: 基本类型, 第 ... 次执行 2.4 引用类型 2.4.1 数组作为依赖无限循环 【现象】useEffect 会在第一次渲染以及每次更新渲染后都执行。 【原因】第一次渲染后执行一次useEffectuseEffect中回调函数改变state值state值改变触发组件重新渲染useEffect依赖项arr发生变化此处依赖数组执行浅层比较[...] [...] 为falseuseEffect重新执行useEffect中回调函数改变state值state值改变触发组件重新渲染无限循环。 const [count, setCount] useState(1);
const newArr [4,5];
useEffect(() {setTimeout(() {setCount(count1);}, 1000);console.log(第二个参数: 数组, 第 ${count} 次执行);
}, [newArr]);// 打印log无限循环
第二个参数: 数组, 第 1 次执行
第二个参数: 数组, 第 2 次执行
第二个参数: 数组, 第 3 次执行
第二个参数: 数组, 第 ... 次执行 【测试】去除setTimeout会出现什么情况---无限循环 因为useEffect频繁调用setStatestate不断改变 const [count, setCount] useState(1);
const newArr [4,5];
useEffect(() {setCount(count1);console.log(第二个参数: 基本类型, 第 ${count} 次执行);
}, [newArr]);// 打印log报错说超出最大更新深度 【解决】 使用useRefuseRef会在每次渲染时返回同一个ref对象返回的ref在组件的整个生命周期内保持不变 const [count, setCount] useState(1);
const refArr useRef([4, 5, 6]);
useEffect(() {setCount(count1);console.log(第二个参数: 数组, 第 ${count} 次执行);
}, [refArr.current]);// 打印log执行一次
第二个参数: 数组, 第 1 次执行 2.4.2 函数作为依赖无限循环 【现象】useEffect 会在第一次渲染以及每次更新渲染后都执行。 【原因】第一次渲染后执行一次useEffectuseEffect中回调函数改变state值state值改变触发组件重新渲染useEffect依赖项consoleFunction函数发生变化此处依赖函数执行浅层比较每次渲染都重新创建一个新的函数 function(前) function后为falseuseEffect重新执行useEffect中回调函数改变state值state值改变触发组件重新渲染无限循环 const [count, setCount] useState(1);
const consoleFunction () {console.log(consoleFunction);
};
useEffect(() {setTimeout(() {setCount(count 1);}, 1000);console.log(第二个参数: 函数, 第 ${count} 次执行);
}, [consoleFunction]);// 打印log无限循环
第二个参数: 函数, 第 1 次执行
第二个参数: 函数, 第 2 次执行
第二个参数: 函数, 第 3 次执行
第二个参数: 函数, 第 ... 次执行 【测试】去除setTimeout会出现什么情况---无限循环 因为useEffect频繁调用setStatestate不断改变 打印报错“ 超出最大更新深度 ” 【解决】 使用useCallbackuseCallback返回该回调函数的 memoized 版本该回调函数仅在某个依赖项改变时才会更新 const [count, setCount] useState(1);
const consoleFunction useCallback(() {console.log(consoleFunction);
}, []);
useEffect(() {setCount(count 1);console.log(第二个参数: 函数, 第 ${count} 次执行);
}, [consoleFunction]);// 打印log执行一次
第二个参数: 函数, 第 1 次执行 2.4.3 对象作为依赖无限循环 【现象】useEffect 会在第一次渲染以及每次更新渲染后都执行。 【原因】第一次渲染后执行一次useEffectuseEffect中回调函数改变state值state值改变触发组件重新渲染useEffect依赖项obj发生变化此处依赖对象执行浅层比较 {...} {...} 为falseuseEffect重新执行useEffect中回调函数改变state值state值改变触发组件重新渲染无限循环 const [count, setCount] useState(1);
const obj {name: zhangsan};
useEffect(() {setTimeout(() {setCount(count 1);}, 1000);console.log(第二个参数: 对象, 第 ${count} 次执行);
}, [obj]);// 打印log无限循环
第二个参数: 对象, 第 1 次执行
第二个参数: 对象, 第 2 次执行
第二个参数: 对象, 第 3 次执行
第二个参数: 对象, 第 ... 次执行 【测试】去除setTimeout会出现什么情况---无限循环 因为useEffect频繁调用setStatestate不断改变 打印报错“ 超出最大更新深度 ” 【解决】 使用useMemouseMemo该回调函数仅在某个依赖项改变时才会更新。此处使用[ ]依赖组件重新渲染后对象不再重新定义 const [count, setCount] useState(1);
const obj useMemo(() ({name: zhangsan}), []);
useEffect(() {setCount(count 1);console.log(第二个参数: 对象, 第 ${count} 次执行);
}, [obj]);// 打印log
第二个参数: 对象, 第 1 次执行
