如何用useMemo封装数组初始化修复React useEffect依赖变动警告

架构老林

2026-9-30

问题原因

组件渲染函数内直接声明的slider1、slider2空数组会在每次组件重渲染时生成新的引用地址，作为useEffect依赖会导致useEffect每次渲染都被触发，不符合React Hook的依赖规范，因此触发ESLint警告。

修复方案

方案一：按警告提示使用`useMemo`包裹初始化

适用于slider1、slider2仅需初始化一次、后续不会整体重新赋值的场景：

// 首先从react中导入需要的Hook
import { useState, useEffect, useMemo } from 'react';

// 组件内部逻辑
const [nav1, setNav1] = useState(null);
const [nav2, setNav2] = useState(null);
// 空依赖数组保证仅首次渲染时初始化一次，引用不会随渲染变化
const slider1 = useMemo(() => [], []);
const slider2 = useMemo(() => [], []);

useEffect(() => {
  setNav1(slider1);
  setNav2(slider2);
}, [slider1, slider2]);

方案二：使用`useRef`存储引用（更适配轮播实例存储场景）

如果你使用这两个变量存储轮播（比如Swiper）的实例，不需要通过它们的变化触发组件渲染，选择useRef更合理：

// 首先从react中导入需要的Hook
import { useState, useEffect, useRef } from 'react';

// 组件内部逻辑
const [nav1, setNav1] = useState(null);
const [nav2, setNav2] = useState(null);
// useRef返回的对象引用在组件全生命周期内保持不变
const slider1 = useRef([]);
const slider2 = useRef([]);

useEffect(() => {
  setNav1(slider1.current);
  setNav2(slider2.current);
}, []);