在useEffect依赖项数组中添加数组会导致无限循环

在React中，useEffect是一个用于处理副作用的Hook函数。副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作，例如数据获取、订阅事件、修改DOM等。

useEffect接受两个参数，第一个参数是一个回调函数，用于定义副作用的操作；第二个参数是一个依赖项数组，用于指定在依赖项发生变化时才执行副作用操作。

当依赖项数组为空时，useEffect只会在组件首次渲染完成后执行一次副作用操作。当依赖项数组中的某个值发生变化时，useEffect会重新执行副作用操作。

然而，如果在依赖项数组中添加一个数组，例如：

useEffect(() => {
  // 副作用操作
}, [array]);

这样会导致无限循环的问题。原因是每次渲染时，由于数组是引用类型，即使数组的内容没有发生变化，但是每次都会生成一个新的数组，导致依赖项数组中的引用发生变化，从而触发重新执行副作用操作。

为了解决这个问题，可以使用useMemo或useCallback来缓存数组的引用，确保依赖项数组中的引用不会发生变化，例如：

const memoizedArray = useMemo(() => array, [array]);

useEffect(() => {
  // 副作用操作
}, [memoizedArray]);

或者使用useRef来缓存数组的引用，例如：

const arrayRef = useRef(array);

useEffect(() => {
  // 副作用操作
}, [arrayRef.current]);

这样就能避免无限循环的问题。

推荐的腾讯云相关产品：无

参考链接：

• React官方文档 - useEffect
• React官方文档 - useMemo
• React官方文档 - useCallback
• React官方文档 - useRef