使用useEffect及踩坑记录
useEffect 介绍
useEffect时reactHook中最重要，最常用的hook之一。
useEffect相当于react中的什么生命周期呢？
这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？），开个玩笑这个问题并不难回答，下面是react官方的原话：
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
componentDidMount组件挂载componentDidUpdate组件更新componentWillUnmount组件将要摧毁
useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组
用法
useEffect(() => {
/** 执行逻辑 */
},[])
重要理解
一、第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行
二、第二个参数可以不传，不会报错，但浏览器会无线循环执行逻辑处理函数。
useEffect(() => {
/** 执行逻辑 */
})
三、第二个参数如果只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ，不就是相当于 componentDidMount
useEffect(() => {
/** 执行逻辑 */
},[])
四、第二个参数如果不为空数组，如下
const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 执行逻辑 */
},[a,b])
逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和 componentDidUpdate 的结合
五、useEffect第一个参数可以返回一个回调函数，这个回调函数将会在组件被摧毁之前和再一次触发更新时，将之前的副作用清除掉。这就相当于componentWillUnmount。
useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅（计时器，或者递归循环）。在组件被摧毁之前，或者依赖数组的元素更新后，应该将这些订阅也给摧毁掉。
比如以下的情况（没有去除计时器，增大不必要的开销和代码风险)
const [time, setTime] = useState(0)
useEffect(() => {
const InterVal = setInterval(() => {
setTime(time + 1)
},1000)
},[])
利用第五点，在组件被摧毁前去除计时器。
const [time, setTime] = useState(0)
useEffect(() => {
const InterVal = setInterval(() => {
setTime(time + 1)
},1000)
return () => {
clearInterval(InterVal )
}
},[])
useEffect常见跳坑
1、useEffect执行函数被循环执行。
出现这种情况可能有两种原因。
没传第二个参数
useEffect(() => {
/** 执行逻辑 */
})
2、你在useEffect执行函数里面改变了useEffect监测的变量
const [a, setA] = useState(1);
useEffect(() => {
/** 执行逻辑 */
setA(a + 1)
},[a])
解决的方法 不要在useEffect第一参数执行函数中去改变第二参数依赖元素的地址的值。当依赖元素的地址的值发生改变，又会执行一次执行函数，这不是无限循环么。
3、useEffect监测不到依赖数组元素的变化。
只有一种可能，依赖数组元素的地址的值根本就没变，比如:
const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
setA((old) => {
old.b = 'yx'
return old
})
}
useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])
/**当changeA执行却没有打印 a*/
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])
是因为changeA没有真正的改变a在栈中的值（地址的值），只是改变了a在堆中的值。
useEffect监测不到堆中值得变化，所有引用类型数据都应该注意这一点。
解决的办法：
const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
setA((old) => {
const newA = {...old}
newA .b = 'yx'
return newA
})
}
useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])
/**当changeA执行打印 {b:'yx',c:'18'} */
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])
hooks中useEffect()使用总结
常见使用
获取数据案例：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'https://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
}, []);
return (
-
{data.hits.map(item => (
- {item.title} ))}
上面例子中，useState()用来生成一个状态变量（data），保存获取的数据；useEffect()的副效应函数内部有一个 async 函数，用来从服务器异步获取数据。拿到数据以后，再用setData()触发组件的重新渲染。
由于获取数据只需要执行一次，所以上例的useEffect()的第二个参数为一个空数组
附线上运行代码
useEffect() 的第二个参数说明
有时候，我们不希望useEffect()每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。
function Welcome(props) {
useEffect(() => {
document.title = `Hello, ${props.name}`;
}, [props.name]);
return Hello, {props.name}
;
}
上面例子中，useEffect()的第二个参数是一个数组，指定了第一个参数（副效应函数）的依赖项（props.name）。只有该变量发生变化时，副效应函数才会执行。如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。
因此，副效应函数这时只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行。这很合理，由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。
useEffect() 第一个函数参数的返回值
副效应是随着组件加载而发生的，那么组件卸载时，可能需要清理这些副效应。
useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
}, [props.source]);
上面例子中，useEffect()在组件加载时订阅了一个事件，并且返回一个清理函数，在组件卸载时取消订阅。
实际使用中，由于副效应函数默认是每次渲染都会执行，所以清理函数不仅会在组件卸载时执行一次，每次副效应函数重新执行之前，也会执行一次，用来清理上一次渲染的副效应。
useEffect() 的注意点
使用useEffect()时，有一点需要注意。如果有多个副效应，应该调用多个useEffect()，而不应该合并写在一起。
错误写法：
function App() {
const [varA, setVarA] = useState(0);
const [varB, setVarB] = useState(0);
useEffect(() => {
const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);
return () => {
clearTimeout(timeoutA);
clearTimeout(timeoutB);
};
}, [varA, varB]);
return {varA}, {varB};
}
上面的例子是错误的写法，副效应函数里面有两个定时器，它们之间并没有关系，其实是两个不相关的副效应，不应该写在一起。正确的写法是将它们分开写成两个useEffect()。
正确写法：
function App() {
const [varA, setVarA] = useState(0);
const [varB, setVarB] = useState(0);
useEffect(() => {
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
return () => clearTimeout(timeout);
}, [varA]);
useEffect(() => {
const timeout = setTimeout(() => setVarB(varB + 2), 2000);
return () => clearTimeout(timeout);
}, [varB]);
return {varA}, {varB};
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。