如何在React启动时仅初始化一次Context为Footer提供全局数据

方案1：useContext 实现（推荐，符合React数据流规范） #

完全匹配你的需求，数据仅请求一次，全应用组件均可直接读取，自带响应式更新能力。

步骤1：创建独立Context文件（示例路径src/contexts/MyDataContext.js） #

import { createContext, useContext, useEffect, useState } from 'react';
import axios from 'axios';

// 初始化Context，设置默认值结构
const MyDataContext = createContext({
  myData: {},
  loading: true,
  error: null
});

// 封装Provider组件，内部处理单次请求逻辑
export function MyDataProvider({ children }) {
  const [myData, setMyData] = useState({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 空依赖数组保证请求仅在组件挂载时执行一次
    axios.get('/url/to/get/data')
      .then((response) => {
        const rawData = response.data.mydata;
        setMyData({ 
          key1: rawData.field1, 
          key2: rawData.field2, 
          key3: rawData.field3 
        });
      })
      .catch(err => {
        setError(err);
        // 可在这里配置请求失败的兜底数据
        setMyData({ key1: '默认值1', key2: '默认值2', key3: '默认值3' });
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  return (
    <MyDataContext.Provider value={{ myData, loading, error }}>
      {children}
    </MyDataContext.Provider>
  );
}

// 封装自定义Hook，简化后续组件调用
export function useMyData() {
  return useContext(MyDataContext);
}

步骤2：在App.js根节点包裹Provider #

import { MyDataProvider } from './contexts/MyDataContext';
import Footer from './components/Footer';
// 其他应用组件导入省略

function App() {
  return (
    <MyDataProvider>
      {/* 原有应用内容，比如路由、页面组件、Header等 */}
      <Footer />
    </MyDataProvider>
  );
}

export default App;

步骤3：Footer组件中直接获取数据 #

import { useMyData } from '../contexts/MyDataContext';

function Footer() {
  const { myData, loading, error } = useMyData();

  if (loading) return <div>加载中...</div>;
  if (error) return <div>数据加载失败</div>;

  return (
    <footer>
      <p>字段1：{myData.key1}</p>
      <p>字段2：{myData.key2}</p>
      <p>字段3：{myData.key3}</p>
    </footer>
  );
}

export default Footer;

方案2：轻量替代方案（仅适合纯静态无更新需求的场景） #

如果你的数据请求回来后不会修改，也不需要触发组件自动重渲染，可以用全局变量方案，实现更简单：

步骤1：新建全局数据文件（示例路径src/utils/globalData.js） #

import axios from 'axios';

const globalMyData = {
  data: null,
  loading: true,
  error: null
};

// 项目启动时执行一次请求
export const initGlobalData = async () => {
  try {
    const response = await axios.get('/url/to/get/data');
    const rawData = response.data.mydata;
    globalMyData.data = { 
      key1: rawData.field1, 
      key2: rawData.field2, 
      key3: rawData.field3 
    };
  } catch (err) {
    globalMyData.error = err;
    globalMyData.data = { key1: '默认值1', key2: '默认值2', key3: '默认值3' };
  } finally {
    globalMyData.loading = false;
  }
};

export const getMyData = () => globalMyData;

步骤2：在入口文件index.js初始化数据 #

import { initGlobalData } from './utils/globalData';
import App from './App';

// 初始化完成后再渲染应用
initGlobalData().then(() => {
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
});

步骤3：Footer组件直接调用即可 #

import { getMyData } from '../utils/globalData';

function Footer() {
  const { data, loading, error } = getMyData();
  // 渲染逻辑和方案1一致
}

注意：该方案无响应式能力，数据更新不会触发组件重渲染，仅适合纯静态全局初始化数据场景。

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