useEffect的意义
useEffect这个hook给函数组件提供了函数的副作用操作。
所谓函数的副作用,就是函数除了返回返回值外还会对外界环境造成其它的影响。简单来说,我们可以理解为函数内去做一些操作,如修改外部的环境变量、做网络请求、调用一些API等待。
在Hook出来之前,如果我们需要在组件中进行副作用的话就需要将组件写成类组件,然后在组件的生命周期函数里面写副作用,这其实会引起很多代码设计上的问题,Hook出来之后,开发者就可以在函数组件中使用useEffect来定义副作用了。
useEffect的使用
useEffect()有三个参数,
第一个参数是useEffect调用时要触发的副作用函数(我们自己设计),即组件每次渲染都会从新运行这个函数;
第二个参数(可选)是依赖项dependencies来限制该副作用函数的执行条件;
第三个参数(可选)是副作用函数的return的函数,并在组件下一次渲染前执行,一般用于清除副作用影响。
标准写法;
useEffect( ()=>{
//定义操作
?return func
},?[dependencies])
//?代表可选,依赖项写在[ ]中,可以有多个,也可以写个空数组
//写个空数组代表副作用函数只会在组件初次渲染时执行,因为没有支持它改变的
//如果想要每次从新渲染都执行,直接不写[ ]就行了,这时它不依赖任何数据
总结:
useEffect(() => { }) //每次组件渲染都执行
useEffect(() => { return () => { } }, []) //组件第一次渲染执行,组件移除时触发clean函数
useEffect(() => { return () => { } }, [count])//count改变才会执行,组件重新渲染前触发clean函数
动手实践一下:
import React,{useState,useEffect} from 'react'
function App() {
let [count,setCount]=useState(1)
useEffect(()=>{
console.log("发生了更新");
// setCount(count+1)如果在函数内做刷新操作,副作用函数会一直执行,函数会造成死循环
return ()=>{
console.log("下一次更新的前一刻");
}
})
return (
<div className="App">
{count}
<button onClick={()=>{setCount(count+1);}}>修改count</button>
</div>
);
}
export default App;
点击按钮修改count时,页面会从新渲染,浏览器打印效果:
可以看出函数组件首次加载时,就会执行副作用函数。之后当组件页面从新刷新时,先执行副作用函数返回的返回值函数,然后在执行自己。
我们试一下加上依赖如何:
let msg="666" //定义一个变量作为副作用函数的依赖项
useEffect(()=>{
console.log("发生了更新");
// setCount(count+1)如果在函数内做刷新操作,副作用函数会一直执行,函数会造成死循环
return ()=>{
console.log("下一次更新的前一刻");
}
},[msg])//绑定msg为依赖项后,除了首次渲染会执行副作用函数外,只有msg改变时才会运行
效果:
可以看到此时无论我们怎么修改count刷新页面,副作用函数都不会再执行。
这里只是对useEffect做了简单的介绍,项目中具体使用场景中要复杂的多,可以当官方文档中学习一下。