React中如何不刷新整页仅刷新单个iframe组件？

两个场景的问题本质不一样：

1. 开发环境整页重载：CRA/Vite 自带的热更新服务默认会监听 public 目录下所有文件变更，一旦检测到文件改动就触发整页热重载，和业务代码逻辑无关。
2. build 后 iframe 不更新：静态资源服务默认会给 public 下的静态文件加长期强缓存，浏览器直接读本地缓存副本，根本不会发起新请求拿修改后的文件内容。

1. 先关掉开发环境对目标文件的热更新监听 #

从根源上避免文件改动触发整页刷新，按你用的脚手架改配置即可：

• 如果你用 Vite 搭建的项目，直接修改 vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      // 把你存iframe内容、会被Flask修改的文件路径加到忽略列表
      ignored: ['**/public/your-target-file.html']
    }
  }
})

• 如果你用 Create React App 搭建的项目，先执行 npm run eject 暴露webpack配置，或者用react-app-rewired修改配置，在devServer的watchOptions里把对应文件路径加到ignored列表，同时在根目录.env文件里加FAST_REFRESH=false关掉对应路径的热替换。

2. 实现iframe可控无刷新更新 #

不要给iframe写死静态src地址，用state控制src属性，通过拼接时间戳参数绕开缓存，在文件确实更新完成时主动触发iframe重载：

import { useState, useCallback } from 'react'

export default function ContentFrame() {
  // 初始加载就带时间戳，避免首次加载拿缓存
  const [frameSrc, setFrameSrc] = useState(`/your-target-file.html?t=${Date.now()}`)

  // 刷新iframe的方法，仅重载iframe内容，不会影响父页面
  const reloadFrame = useCallback(() => {
    setFrameSrc(`/your-target-file.html?t=${Date.now()}`)
  }, [])

  // 举个例子：如果是前端发请求给Flask触发文件修改，就在接口请求成功后调用reloadFrame
  // const handleTriggerChange = async () => {
  //   await fetch('/api/flask/modify-file')
  //   reloadFrame()
  // }

  return (
    <iframe 
      src={frameSrc} 
      title="dynamic-content"
      width="100%"
      height="600"
    />
  )
}

注意：不要用iframe.contentWindow.location.reload()这类方法刷新，这类方法会直接复用缓存，还是会拿到旧内容。

3. 解决生产环境缓存问题 #

部署build产物的时候，给你那个会被动态修改的文件单独配置响应头，把Cache-Control设为no-cache，不要让浏览器或者CDN缓存这个文件，其他静态资源的缓存策略不用改，不影响整体加载性能。
如果是用Nginx部署，加一行匹配规则即可：

location = /your-target-file.html {
  add_header Cache-Control "no-cache";
}

如果是用Node的serve、或者其他静态服务，找对应配置项单独给这个文件关缓存就行。

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