useEffect依赖项参数说明
https://zh-hans.react.dev/reference/react/useEffect#
useEffect函数的第二个参数是依赖项,第一个参数是副作用函数。
useEffect 副作用函数的执行时机存在多种情况,根据传入依赖项的不同,会有不同的执行表现:
依赖项 | 副作用函数的执行时机 |
---|---|
没有依赖项 | 组件初始渲染 + 组件更新时执行 |
空数组依赖项 | 只在初始渲染时执行一次 |
添加特定依赖项 | 组件初始渲染 + 特定依赖项变化时执行 |
示例
没有依赖项的情况:即useEffect函数的第二个参数不传的情况
组件初始化时副作用函数执行
组件更新时会再次执行
传入空数组依赖:即useEffect函数的第二个参数传入一个空数组
import { useEffect, useState } from "react"
function App() {
// 依赖项传入的是一个空数组:初始执行一次
const [count, setCount] = useState(0)
useEffect(() => {
console.log('副作用函数执行了')
}, [])
return (
<div>
this is App
<button onClick={() => setCount(count + 1)}>点击累加后:{count} </button>
</div >
)
}
export default App
点击按钮,视图重新渲染,但useEffect的副作用函数并没有再次执行:
传入特定的依赖项:初始执行一次 + 依赖项发生变化时执行
初始显示:
点击按钮,count的值发生变化,每变化一次,就执行一次useEffect函数中的副作用函数: