React 中模块作用域变量的可访问性分析

在 React 开发中，我们经常需要处理全局状态管理的问题。今天，让我们深入探讨一个有趣的问题：没有被 export 的模块级变量是否可以被其他文件访问？

模块作用域变量的访问性

让我们通过一个具体的示例来分析这个问题：

// modal.ts
let setModalStateRef: React.Dispatch<React.SetStateAction<ModalState>> | null = null;

这个变量虽然没有被直接导出，但是它可以通过以下方式被间接访问和使用。

方式一：通过导出的函数间接访问

// modal.ts
let setModalStateRef: React.Dispatch<React.SetStateAction<ModalState>> | null = null;

// 导出使用该变量的函数
export function toggleModal(visible: boolean) {
  setModalStateRef?.(prev => ({ ...prev, visible }));
}

其他文件可以通过调用 toggleModal 函数间接使用这个变量：

// otherFile.ts
import { toggleModal } from './modal';

// 可以通过 toggleModal 间接操作 setModalStateRef
toggleModal(true);

多文件同名变量的独立性

如果在不同的文件中定义同名变量，它们是相互独立的：

// modalA.ts
let setModalStateRef = null;

export const toggleModalA = (visible: boolean) => {
  setModalStateRef?.(prev => ({ ...prev, visible }));
};

// modalB.ts
let setModalStateRef = null;

export const toggleModalB = (visible: boolean) => {
  setModalStateRef?.(prev => ({ ...prev, visible }));
};

这两个 setModalStateRef 变量是完全独立的，互不影响，因为它们存在于不同的模块作用域中。

实际应用示例

让我们看一个完整的示例，展示如何在实际项目中使用这种模式：

// modal.ts
interface ModalState {
  visible: boolean;
  data: any;
}

let setModalStateRef: React.Dispatch<React.SetStateAction<ModalState>> | null = null;

export const ModalComponent: React.FC = () => {
  const [modalState, setModalState] = useState<ModalState>({
    visible: false,
    data: null
  });

  useEffect(() => {
    setModalStateRef = setModalState;
    return () => {
      setModalStateRef = null;
    };
  }, []);

  return <Modal visible={modalState.visible} />;
};

export const toggleModal = (visible: boolean, data?: any) => {
  setModalStateRef?.(prev => ({
    ...prev,
    visible,
    data: visible ? data : null
  }));
};

最佳实践建议

虽然这种方式可行，但从代码设计的角度来看，还有更好的实践方式：

1. 使用自定义 Hook

export function useModal() {
  const [modalState, setModalState] = useState({
    visible: false,
    data: null
  });

  const toggleModal = useCallback((visible: boolean, data?: any) => {
    setModalState(prev => ({
      ...prev,
      visible,
      data: visible ? data : null
    }));
  }, []);

  return {
    modalState,
    toggleModal
  };
}

总结

模块作用域：没有被导出的变量确实可以通过导出的函数间接访问和修改。
变量独立性：不同文件中的同名变量是互相独立的，不会相互影响。
最佳实践：
- 优先考虑使用自定义 Hook
- 避免使用模块级变量来管理状态
代码维护：使用自定义 Hook 或 Context API 不仅可以避免全局变量的潜在问题，还能提供更清晰的代码结构和更好的可维护性。

通过合理使用这些模式，我们可以写出更加健壮和可维护的 React 应用。记住，虽然某些模式可行，但并不意味着它们就是最佳选择。在实际开发中，我们应该始终追求更好的代码组织方式。