Electron+React应用执行IPC数据库写操作时出现类刷新UI问题

我用Electron+React开发桌面应用，遇到一个异常：通过IPC执行SQLite数据库写操作（新增/更新/删除）时，UI会出现类似刷新的闪烁效果，但页面并未实际重载。

查询数据库时完全正常，仅增删改操作触发该问题。已排除不必要的React重渲染或状态更新的可能，代码中也无任何导航或窗口重载命令。

因React无法直接使用Sequelize操作数据库，我将数据库及相关服务放在electron.js所在的public目录下，通过IPC实现主进程与渲染进程通信。

相关代码 #

Electron主进程代码 #

ipcMain.handle("addManufacture", async (event, name) => {
  const manufacturer = await models.Manufacturer.create({ name });
  return manufacturer;
});

React组件代码 #

const handleAddManufacturer = () => {
  window.electron
    .addManufacture(newManufacturerName)
    .then((manufacturer) => {
      setManufacturers([...manufacturers, manufacturer]);
      setNewManufacturerName("");
      onClose();
    })
    .catch((error) => {
      console.error(error);
    });
};

package.json配置 #

{
  "name": "parts-app",
  "version": "0.1.0",
  "private": true,
  "main": "public/electron.js",
  "homepage": ".",
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@reduxjs/toolkit": "^2.2.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.1.0",
    "axios": "^1.7.2",
    "browserify-zlib": "^0.2.0",
    "crypto-browserify": "^3.12.0",
    "electron-is-dev": "^3.0.1",
    "framer-motion": "^11.3.19",
    "path-browserify": "^1.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.25.1",
    "react-scripts": "5.0.1",
    "redux-persist": "^6.0.0",
    "sequelize": "^6.37.3",
    "sqlite3": "^5.1.7",
    "stream-browserify": "^3.0.0",
    "url": "^0.11.4",
    "util": "^0.12.5",
    "uuid": "^10.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "concurrently \"npm run start-react\" \"npm run start-electron\"",
    "start-react": "react-scripts start",
    "start-electron": "wait-on http://localhost:3000 && electron .",
    "build": "react-scripts build && electron-builder",
    "postinstall": "electron-builder install-app-deps",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test"
  },
  "build": {
    "appId": "com.parts-app",
    "mac": {
      "category": "public.app-category.productivity"
    },
    "win": {
      "target": [
        "nsis",
        "portable"
      ]
    },
    "files": [
      "build/**/*",
      "public/electron.js"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.24.8",
    "@babel/preset-react": "^7.24.7",
    "concurrently": "^8.2.2",
    "electron": "^31.3.0",
    "electron-builder": "^24.13.3",
    "wait-on": "^7.2.0"
  }
}

1. 修复数据库文件触发React热重载 #

React开发服务器会监听public/src目录下的文件变化，你把数据库文件放在public目录中，写操作修改.db文件时会被热重载机制捕获，导致UI闪烁。

解决：

• 将数据库文件移到项目根目录的独立文件夹（如./database），避免被React监听。
• 修改Sequelize连接路径指向新位置：

  const sequelize = new Sequelize({
    dialect: 'sqlite',
    storage: path.join(__dirname, '../../database/db.sqlite')
  });
  

2. 优化IPC返回值序列化 #

Sequelize模型实例包含不可序列化的内部属性，Electron序列化IPC返回值时可能引发异常，间接导致UI异常。

解决：
主进程返回纯JSON对象而非模型实例：

ipcMain.handle("addManufacture", async (event, name) => {
  const manufacturer = await models.Manufacturer.create({ name });
  return manufacturer.toJSON();
});

3. 排查Redux Persist的异常重hydrate #

你使用了redux-persist，数据库操作触发的状态变化可能导致持久化机制自动重hydrate状态，引发UI闪烁。

解决：

• 临时禁用redux-persist验证是否为此原因。
• 调整persist配置，限制仅必要的reducer参与持久化，避免不必要的rehydration。

4. 禁用React开发服务器的文件监听（临时方案） #

若不想移动数据库文件，可修改启动脚本禁用监听：

"start-react": "BROWSER=none WATCHPACK_POLLING=false react-scripts start"

此方案仅适合临时测试，长期使用会影响开发效率。

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