hooks中useEffect()使用案例详解.docx

第

hooks中useEffect()使用案例详解

上面例子中，useState()用来生成一个状态变量（data），保存获取的数据；useEffect()的副效应函数内部有一个async函数，用来从服务器异步获取数据。拿到数据以后，再用setData()触发组件的重新渲染。

由于获取数据只需要执行一次，所以上例的useEffect()的第二个参数为一个空数组

附线上运行代码

useEffect()的第二个参数说明

有时候，我们不希望useEffect()每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。

functionWelcome(props){

useEffect(()={

document.title=`Hello,${props.name}`;

},[props.name]);

returnh1Hello,{props.name}/h1

上面例子中，useEffect()的第二个参数是一个数组，指定了第一个参数（副效应函数）的依赖项（props.name）。只有该变量发生变化时，副效应函数才会执行。如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。因此，副效应函数这时只会在组件加载进入DOM后执行一次，后面组件重新渲染，就不会再次执行。这很合理，由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。

useEffect()第一个函数参数的返回值

副效应是随着组件加载而发生的，那么组件卸载时，可能需要清理这些副效应。

useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。

useEffect(()={

constsubscription=props.source.subscribe();

return()={

subscription.unsubscribe();

},[props.source]);

上面例子中，useEffect()在组件加载时订阅了一个事件，并且返回一个清理函数，在组件卸载时取消订阅。

实际使用中，由于副效应函数默认是每次渲染都会执行，所以清理函数不仅会在组件卸载时执行一次，每次副效应函数重新执行之前，也会执行一次，用来清理上一次渲染的副效应。

useEffect()的注意点

使用useEffect()时，有一点需要注意。如果有多个副效应，应该调用多个useEffect()，而不应该合并写在一起。

错误写法:

functionApp(){

const[varA,setVarA]=useState(0);

const[varB,setVarB]=useState(0);

useEffect(()={

consttimeoutA=setTimeout(()=setVarA(varA+1),1000);

consttimeoutB=setTimeout(()=setVarB(varB+2),2000);

return()={

clearTimeout(timeoutA);

clearTimeout(timeoutB);

},[varA,varB]);

returnspan{varA},{varB}/span

上面的例子是错误的写法，副效应函数里面有两个定时器，它们之间并没有关系，其实是两个不相关的副效应，不应该写在一起。正确的写法是将它们分开写成两个useEffect()。

正确写法:

functionApp(){

const[varA,setVarA]=useState(0);

const[varB,setVarB]=useState(0);

useEffect(()={

consttimeout=setTimeout(()=setVarA(varA+1),1000);

return()=clearTimeout(timeout);

},[varA]);

useEffect(()={

consttimeout=setTimeout(()=setVarB(varB+2),2000);

return()=clearTimeout(timeo