ReactJS 如何实现不刷新整页的页面内容重载功能？

核心思路是依靠React的状态驱动特性，仅触发业务组件的重渲染/数据重新拉取，完全不需要整页刷新。

方案1：基于key属性强制组件重挂载 #

利用React的渲染规则：当组件的key属性发生变化时，React会直接卸载旧组件，挂载全新的组件实例，自动执行组件初始化的所有逻辑（包括数据请求、状态重置等），实现效果和业务区域整刷完全一致，且不需要修改业务组件内部代码。

import { useState } from 'react';
import BusinessContent from './BusinessContent';
// 重载图标可使用自定义svg或组件库图标，此处仅为示例
import { ReloadOutlined } from '@ant-design/icons'

function CurrentPage() {
  const [refreshKey, setRefreshKey] = useState(0);

  const handleRefresh = () => {
    // 变更key即可触发业务组件重挂载
    setRefreshKey(prev => prev + 1);
  };

  return (
    <div>
      <div className="page-header">
        <h2>页面标题</h2>
        <ReloadOutlined onClick={handleRefresh} style={{ cursor: 'pointer' }} />
      </div>
      {/* 业务组件绑定动态key */}
      <BusinessContent key={refreshKey} />
    </div>
  );
}

export default CurrentPage;

优势：

• 实现成本极低，适配所有已有业务组件
• 自动清理旧组件的状态、定时器等副作用，不会有状态残留问题

方案2：暴露刷新方法自定义重载逻辑 #

如果不需要重置组件所有状态，只需要重新拉取业务数据，可以通过ref暴露刷新方法实现，适合需要保留部分用户操作状态（比如搜索条件、分页参数）的场景。

业务组件实现 #

// BusinessContent.jsx
import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';

const BusinessContent = forwardRef((props, ref) => {
  const [dataList, setDataList] = useState([]);
  const [loading, setLoading] = useState(false);

  // 封装业务数据请求逻辑
  const fetchBusinessData = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/business/list');
      const result = await res.json();
      setDataList(result);
    } finally {
      setLoading(false);
    }
  };

  // 给父组件暴露refresh方法
  useImperativeHandle(ref, () => ({
    refresh: fetchBusinessData
  }));

  // 组件初始化时拉取数据
  useEffect(() => {
    fetchBusinessData();
  }, []);

  return (
    <div>
      {loading ? '加载中...' : dataList.map(item => <div key={item.id}>{item.content}</div>)}
    </div>
  );
});

BusinessContent.displayName = 'BusinessContent';
export default BusinessContent;

父页面调用 #

import { useRef } from 'react';
import BusinessContent from './BusinessContent';
import { ReloadOutlined } from '@ant-design/icons'

function CurrentPage() {
  const contentRef = useRef(null);

  const handleRefresh = () => {
    // 调用业务组件的刷新方法
    contentRef.current?.refresh();
  };

  return (
    <div>
      <div className="page-header">
        <h2>页面标题</h2>
        <ReloadOutlined onClick={handleRefresh} style={{ cursor: 'pointer' }} />
      </div>
      <BusinessContent ref={contentRef} />
    </div>
  );
}

export default CurrentPage;

优势：

• 可以保留组件内的部分状态，用户体验更友好
• 支持自定义刷新逻辑，比如添加防抖、刷新动画等扩展功能

如果你项目中使用了React Query、SWR这类数据管理库，可直接调用库内置的invalidateQueries方法直接刷新对应接口的数据，无需自己封装刷新逻辑，实现更简单。

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