useEffect 的第二个参数, 传空数组和传依赖数组有什么区别?
在 React 中,useEffect 是一个常用的 Hook,它用于处理组件生命周期中的副作用。
useEffect 接收两个参数,第一个是要执行的函数,第二个是依赖数组(可选)。
当传递空数组 [] 时,useEffect 只会在组件挂载和卸载时调用一次。这种情况下,useEffect 不会监听任何变量,并且不会对组件进行重新渲染。
useEffect(() => {
// 只在挂载和卸载时执行
}, []);
当传递依赖数组时,useEffect 会在组件挂载和依赖项更新时调用。当依赖项中的任何一个值发生变化时,useEffect 都将被重新调用。如果依赖数组为空,则每次组件重新渲染时都会调用 useEffect。
useEffect(() => {
// 在挂载、依赖列表变化及卸载时执行
}, [dep1, dep2]);
下面是这两种情况的总结:
- 当传递空数组 [] 时,useEffect 只会在组件挂载和卸载时调用一次,不会对组件进行重新渲染。
- 当传递依赖数组时,useEffect 会在组件挂载和依赖项更新时调用,每次更新时都会检查依赖项列表是否有变化,如果有变化则重新执行。
如果 useEffect 中使用了闭包函数,则应该确保所有引用的变量都在依赖项中被显示声明,否则可能会导致不必要的重新渲染或者无法获取最新的状态。