React Native中Redux useSelector依赖致自定义useTheme钩子useEffect重复触发

疑问1：对触发机制的理解是否正确？ #

你的理解不完全正确。

• 若universID是数字、字符串这类基本类型值，本身不存在引用变化的问题，只要值不变，全等对比的结果就始终为相等。
• 你遇到的「每次组件调用useTheme时依赖universID的useEffect都触发」的核心原因是：自定义Hook的状态和生命周期和调用它的组件绑定，每一个组件调用useTheme都会生成独立的Hook实例，实例内的useEffect会在所属组件挂载阶段默认执行一次，这是React Hook的正常生命周期规则，和universID的引用是否变化没有直接关系。
• 额外补充：你当前useSelector的写法存在引用不稳定的隐患：你先返回state.univers整个对象再解构取值，如果Redux reducer更新state.univers时总是返回新对象（即使id值没有变化），会导致useSelector触发不必要的重渲染，但只要id本身的值不变，就不会触发依赖universID的useEffect执行。

疑问2：不需要传参的前提下如何避免useEffect重复触发？ #

有两种常用的可行方案，你可以根据业务场景选择：

方案1：全局共享Hook实例（推荐，根治重复执行问题） #

你可以通过Context把useTheme的逻辑提到上层公共Provider中，整个应用只初始化一次useTheme实例，所有业务组件直接从Context取主题相关的值，就不会出现每个组件调用都重复触发useEffect的问题：

// 1. 创建Context
const ThemeContext = createContext();

// 2. 封装Provider组件
export const ThemeProvider = ({ children }) => {
  // 原来useTheme里的所有逻辑直接移到这里
  const [activeTheme, setActiveTheme] = useState();
  const universID = useSelector((state) => state.univers.id);
  const theme = useSelector((state) => state.theme);
  const activeThemes = useSelector((state) => state.settings.themes);
  const dispatch = useDispatch();

  useEffect(() => {
    console.log('TODO TOO MANY CALLS!!!!!', universID);
    if (universID) {
       setTheme(
         activeThemes.find((theme) => theme.univers === universID)?.theme
       );
    }
  }, [universID]);

  useEffect(() => {
    setActiveTheme(
      activeThemes.find((theme) => theme.univers === universID)?.theme
    );
  }, [activeThemes]);

  const contextValue = {
    theme,
    activeTheme,
    setTheme,
  };

  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>
}

// 3. 改造useTheme，直接从Context取值
export const useTheme = () => useContext(ThemeContext);

使用时只需在应用根节点包裹一次ThemeProvider，业务组件的调用方式完全不用改动，同时所有组件共享同一份主题状态，不会重复执行useEffect逻辑。

方案2：加首次渲染标记，屏蔽挂载阶段的执行 #

如果你不想改动现有结构，只需用useRef标记是否为组件首次渲染，跳过useEffect在挂载阶段的默认执行，只有当universID真的发生变化时才执行逻辑：

const useTheme = () => {
  const [activeTheme, setActiveTheme] = useState();
  // 直接取universID基础值，避免引用不稳定隐患
  const universID = useSelector((state) => state.univers.id);
  const universDefaultTheme = useSelector((state) => state.univers.defaultTheme);
  const theme = useSelector((state) => state.theme);
  const activeThemes = useSelector((state) => state.settings.themes);
  const dispatch = useDispatch();
  // 新增首次渲染标记
  const isFirstRender = useRef(true);

  useEffect(() => {
    // 首次挂载直接跳过执行
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    console.log('TODO TOO MANY CALLS!!!!!', universID);
    if (universID) {
       setTheme(
         activeThemes.find((theme) => theme.univers === universID)?.theme
       );
    }
  }, [universID]);

  // ... 其余代码不变
}

额外优化建议 #

你当前的两个useEffect逻辑高度重合，可以合并成一个，减少重复执行：

useEffect(() => {
  const matchedTheme = activeThemes.find((theme) => theme.univers === universID)?.theme;
  setActiveTheme(matchedTheme);
  // 非首次渲染时才调用setTheme更新全局状态
  if (!isFirstRender.current && universID) {
    setTheme(matchedTheme);
  }
}, [universID, activeThemes]);

内容的提问来源于stack exchange，提问作者bug00