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

2023-12-18 09:43:28

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

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

    • useEffect 只会在组件初始化渲染完成后执行一次,相当于 componentDidMount

    • 它不会再次触发,即使组件的 props 或 state 发生变化。

    • 这表明 useEffect 不依赖于任何值,仅在初始化时运行一次,不会进行后续的更新。

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

    • useEffect 在组件初始化渲染完成后执行一次,并在每次指定的依赖项发生变化时再次执行。

    • 这意味着只有当依赖项发生变化时,useEffect 才会被调用。

    • 如果依赖项数组为空,useEffect 将不会被调用。

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

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

文章来源:https://blog.csdn.net/m0_65346405/article/details/135054379
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。