将类静态成员作为useEffect依赖不生效，求原因及解决方法

错误原因 #

• React的useEffect依赖项触发更新的前提是组件发生重新渲染，而组件重新渲染的触发条件仅包括自身useState状态变化、props更新、useContext上下文变更这几类。
• 你定义的StaticData.myStoreValue是普通的类静态成员，完全脱离React的状态管理体系。React不会主动监听这类变量的变化，哪怕它的值被修改，组件也不会触发重新渲染，useEffect自然无法感知到依赖项的变化，也就不会执行回调函数。

正确实现方式 #

方式1：自定义发布订阅+React状态 #

给StaticData添加订阅机制，让组件能监听值的变化并同步到自身状态：

// MyStore.ts
export class StaticData {
  static myStoreValue: string | undefined;
  private static subscribers: Set<(value: string | undefined) => void> = new Set();

  static setMyStoreValue(newValue: string | undefined) {
    StaticData.myStoreValue = newValue;
    // 通知所有订阅者更新
    StaticData.subscribers.forEach(callback => callback(newValue));
  }

  static subscribe(callback: (value: string | undefined) => void) {
    StaticData.subscribers.add(callback);
    // 立即同步当前值给订阅者
    callback(StaticData.myStoreValue);
    // 返回取消订阅的函数，避免内存泄漏
    return () => StaticData.subscribers.delete(callback);
  }
}

组件中使用：

// MyScreen.ts
import { useEffect, useState } from 'react';
import { StaticData } from './MyStore';

function MyScreen() {
  const [storeValue, setStoreValue] = useState<string | undefined>(undefined);

  useEffect(() => {
    // 订阅Store的变化，把值同步到组件状态
    const unsubscribe = StaticData.subscribe(setStoreValue);
    return unsubscribe;
  }, []);

  // 组件状态变化时触发数据获取
  useEffect(() => {
    fetchDataFromAPI();
  }, [storeValue]);

  return <div>{storeValue}</div>;
}

方式2：React Context全局状态 #

把Store的状态放到Context中，让组件通过Context消费状态：

// MyStoreContext.ts
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';

interface StoreContextType {
  myStoreValue: string | undefined;
  setMyStoreValue: (value: string | undefined) => void;
}

const StoreContext = createContext<StoreContextType | undefined>(undefined);

export function StoreProvider({ children }: { children: ReactNode }) {
  const [myStoreValue, setMyStoreValue] = useState<string | undefined>(undefined);

  // 初始化从安全存储拉取数据
  useEffect(() => {
    async function initData() {
      const data = await fetchFromSecureStorage();
      setMyStoreValue(data);
    }
    initData();
  }, []);

  return (
    <StoreContext.Provider value={{ myStoreValue, setMyStoreValue }}>
      {children}
    </StoreContext.Provider>
  );
}

export function useStore() {
  const context = useContext(StoreContext);
  if (!context) {
    throw new Error('useStore必须在StoreProvider内部使用');
  }
  return context;
}

组件中使用：

// MyScreen.ts
import { useEffect } from 'react';
import { useStore } from './MyStoreContext';

function MyScreen() {
  const { myStoreValue } = useStore();

  useEffect(() => {
    fetchDataFromAPI();
  }, [myStoreValue]);

  return <div>{myStoreValue}</div>;
}

方式3：第三方状态管理库（以Zustand为例） #

如果项目需要更复杂的状态管理逻辑，推荐用轻量库Zustand：

// MyStore.ts
import { create } from 'zustand';

interface StoreState {
  myStoreValue: string | undefined;
  setMyStoreValue: (value: string | undefined) => void;
}

export const useStore = create<StoreState>((set) => ({
  myStoreValue: undefined,
  setMyStoreValue: (newValue) => set({ myStoreValue: newValue }),
}));

// 初始化从安全存储获取数据（可在组件内或全局执行）
useStore.subscribe(() => {}, { fireImmediately: false });

组件中使用：

// MyScreen.ts
import { useEffect } from 'react';
import { useStore } from './MyStore';

function MyScreen() {
  const myStoreValue = useStore((state) => state.myStoreValue);

  useEffect(() => {
    fetchDataFromAPI();
  }, [myStoreValue]);

  return <div>{myStoreValue}</div>;
}

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