useEffect 的第二个参数, 传空数组和传依赖数组有什么区别?

简介: 在 React 的 useEffect 钩子函数中,第二个参数用于指定依赖项数组。这个参数可以影响 useEffect 的触发时机和频率。在 React 的 useEffect 钩子函数中,第二个参数用于指定依赖项数组。这个参数可以影响 useEffect 的触发时机和频率。

在 React 的 useEffect 钩子函数中,第二个参数用于指定依赖项数组。这个参数可以影响 useEffect 的触发时机和频率。


1.当传递空数组 [] 作为第二个参数时:


  1. useEffect 只会在组件初始化渲染完成后执行一次,相当于 componentDidMount。
  2. 它不会再次触发,即使组件的 props 或 state 发生变化。
  3. 这表明 useEffect 不依赖于任何值,仅在初始化时运行一次,不会进行后续的更新。


2.当传递依赖项数组 [dependency1, dependency2, ...] 作为第二个参数时:


  1. useEffect 在组件初始化渲染完成后执行一次,并在每次指定的依赖项发生变化时再次执行。
  2. 这意味着只有当依赖项发生变化时,useEffect 才会被调用。
  3. 如果依赖项数组为空,useEffect 将不会被调用。


使用空数组 [] 作为依赖项,主要适用于希望在组件渲染之后执行一些只需执行一次的副作用操作,例如发送网络请求、订阅事件等。而使用具体的依赖项数组可以控制 useEffect 在特定的依赖项发生变化时进行调用,常用于处理需要根据依赖项更新的副作用操作。


需要注意的是,在使用具体的依赖项数组时,应确保其中包含所有在副作用函数中所使用的依赖项。如果某个依赖项被遗漏,可能会导致副作用函数中使用的数据不是最新的。


相关文章
|
3月前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象,并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象,然后根据需要提取对象中的属性值,并将它们放入新的对象中,最终形成一个新的对象数组以供使用。
|
4月前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
41 0
lodash遍历分配对象的属性,忽略相同属性的值
lodash遍历分配对象的属性,忽略相同属性的值
95 0
|
JavaScript 前端开发 小程序
js两个数组对象中,获取不相同的值 非交集元素对象
js两个数组对象中,获取不相同的值 非交集元素对象
215 0
js两个数组对象中,获取不相同的值 非交集元素对象
lodash倒置对象的属性和值
lodash倒置对象的属性和值
84 0
lodash根据迭代函数倒置对象的属性和值
lodash根据迭代函数倒置对象的属性和值
55 0
|
JavaScript 开发者
指令-使用钩子函数的第二个binding参数拿到传递的值|学习笔记
快速学习指令-使用钩子函数的第二个binding参数拿到传递的值
指令-使用钩子函数的第二个binding参数拿到传递的值|学习笔记
lodash删除对象的属性,传入函数
lodash删除对象的属性,传入函数
181 0
lodash根据函数分配值,更新对象的属性路径的值
lodash根据函数分配值,更新对象的属性路径的值
75 0