React：useEffect依赖项参数说明

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函数中的副作用函数：