React中如何在渲染前加载主数据并避免重复渲染？

一、核心逻辑 #

先判断sessionStorage中是否已有目标数据：

• 有则直接复用，跳过API请求
• 没有就发起请求，请求成功后存入sessionStorage，同时标记加载完成
• 加载完成前统一显示加载状态（比如骨架屏、加载动画），禁止渲染后续业务内容

二、函数组件实现方案（推荐） #

用useState管理加载状态和数据，结合useEffect处理异步逻辑，这是目前React的标准写法：

import { useState, useEffect } from 'react';
import YourForm from './YourForm';

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [mainData, setMainData] = useState(null);
  const [loadError, setLoadError] = useState(null);

  useEffect(() => {
    // 优先从sessionStorage读取数据
    const storedData = sessionStorage.getItem('mainAppData');
    if (storedData) {
      setMainData(JSON.parse(storedData));
      setIsLoading(false);
      return;
    }

    // 无缓存时调用API获取数据
    async function fetchMainData() {
      try {
        const response = await fetch('/api/main-data');
        if (!response.ok) throw new Error('数据请求失败');
        const data = await response.json();
        // 存入sessionStorage供会话复用
        sessionStorage.setItem('mainAppData', JSON.stringify(data));
        setMainData(data);
      } catch (err) {
        setLoadError(err.message);
      } finally {
        setIsLoading(false);
      }
    }

    fetchMainData();
  }, []); // 空依赖确保组件挂载后仅执行一次

  // 加载中状态
  if (isLoading) return <div>加载中...</div>;
  // 错误处理
  if (loadError) return <div>加载失败：{loadError}</div>;
  // 数据就绪后渲染业务内容
  return <YourForm data={mainData} />;
}

export default App;

三、封装成自定义Hook（提升复用性） #

如果多个组件需要用到这份数据，把逻辑封装成自定义Hook，避免重复代码：

import { useState, useEffect } from 'react';

function useMainAppData() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const stored = sessionStorage.getItem('mainAppData');
    if (stored) {
      setData(JSON.parse(stored));
      setIsLoading(false);
      return;
    }

    const fetchData = async () => {
      try {
        const res = await fetch('/api/main-data');
        if (!res.ok) throw new Error('数据请求失败');
        const fetchedData = await res.json();
        sessionStorage.setItem('mainAppData', JSON.stringify(fetchedData));
        setData(fetchedData);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  return { isLoading, data, error };
}

// 组件中使用示例
function YourForm() {
  const { isLoading, data, error } = useMainAppData();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error}</div>;

  return (
    <form>
      {/* 使用预加载的数据渲染表单 */}
      <input type="text" defaultValue={data.userName} />
    </form>
  );
}

四、为什么之前的尝试没生效？ #

• componentDidMount/useEffect本身是组件挂载后执行，所以组件初始会先渲染一次空状态，如果你没做加载态判断，就会出现表单先渲染、数据后加载的情况——核心是要在加载完成前阻止业务内容渲染，而非依赖生命周期钩子的执行时机。
• 废弃的componentWillMount本就不推荐，而且它也无法阻止初始渲染，异步请求仍会在渲染之后完成。

五、注意事项 #

• sessionStorage存储容量有限（约5MB），不要存入过大的数据。
• 若数据需要过期机制，存入时可附加时间戳，下次读取时判断是否过期，过期则重新请求。
• 必须处理请求失败的场景，避免用户一直停留在加载态。

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