React应用：向public目录images文件夹存图时如何阻止重渲染？

问题根源是开发环境的dev server会监听public目录的文件变化，一旦外部向public/images存图，webpack/vite的dev server就会触发热重载（全局重渲染），这和React组件本身的渲染优化无关，所以用React.memo、useCallback这类方法没用。

以下是具体解决方案：

方案1：将动态图片存到非监听目录 #

在项目根目录新建一个非public的文件夹（比如uploaded-images），把外部传入的图片存在这里，然后配置dev server允许访问这个目录：

Vite项目配置示例 #

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    fs: {
      allow: ['uploaded-images'], // 允许dev server访问这个目录
    },
  },
});

之后通过http://localhost:3000/uploaded-images/[图片名].jpg访问图片即可，这个目录不在dev server的默认监听范围内，存图不会触发重渲染。

Webpack项目配置示例 #

// webpack.config.js
const path = require('path');

module.exports = {
  // ...其他配置
  devServer: {
    static: {
      directory: path.join(__dirname, 'uploaded-images'),
      publicPath: '/uploaded-images/',
    },
  },
};

方案2：修改dev server监听规则，排除public/images #

如果必须把图片存在public/images，直接让dev server忽略这个目录的变化：

Vite项目 #

// vite.config.js
export default defineConfig({
  server: {
    watch: {
      ignored: ['**/public/images/**'], // 忽略该目录的文件变化
    },
  },
});

Webpack项目 #

// webpack.config.js
module.exports = {
  devServer: {
    watchOptions: {
      ignored: /public\/images/, // 正则匹配忽略的目录
    },
  },
};

补充说明 #

生产环境下不存在这个问题——生产构建后没有dev server的监听机制，即使public目录新增文件，也不会触发React重渲染，所以开发阶段用上述方法规避即可。

内容的提问来源于stack exchange，提问作者Yashwanth Sai Pilla