React中useEffect执行耗时计算致页面卡顿，如何解决？

核心思路 #

aiMove属于CPU密集型计算，会占用主线程导致UI冻结。要实现后台运行不阻塞UI，核心是将计算逻辑移出主线程，推荐使用Web Worker（彻底隔离后台线程），也可采用简易的异步任务方案（适合短耗时计算）。

方案一：Web Worker（推荐，彻底无阻塞） #

Web Worker允许在独立于主线程的后台线程执行脚本，完全不影响UI渲染。

步骤1：创建Worker脚本文件（如aiWorker.js） #

// aiWorker.js
// 将原aiMove函数的完整逻辑移至此处
self.onmessage = function(e) {
  const { statusJSON, botAi } = e.data;
  const aiMoveIs = aiMove(statusJSON, botAi);
  // 计算完成后向主线程发送结果
  self.postMessage(aiMoveIs);
};

// 原aiMove函数的实现（需确保无React/DOM依赖）
function aiMove(statusJSON, botAi) {
  // 你的AI走法计算逻辑
}

步骤2：在React组件中集成Worker #

修改原useEffect逻辑：

useEffect(() => {
  if (botTurn) {
    // 初始化Worker实例
    const aiWorker = new Worker('/aiWorker.js');
    const statusJSON = status(game.fen());

    // 向Worker传递计算所需数据
    aiWorker.postMessage({ statusJSON, botAi });

    // 监听Worker返回的计算结果
    aiWorker.onmessage = function(e) {
      const aiMoveIs = e.data;
      console.log(aiMoveIs);
      // 此处可通过setState更新UI，比如setBotMove(aiMoveIs)
      // 任务完成后销毁Worker，避免内存泄漏
      aiWorker.terminate();
    };

    // 组件卸载时清理Worker
    return () => aiWorker.terminate();
  }
}, [botTurn, game, botAi]);

注意：Worker环境无法访问React Hooks、DOM或主线程变量，需将所有计算依赖通过postMessage传递，结果返回后再在主线程更新UI。

方案二：异步任务封装（简易方案，适合短耗时计算） #

若不想新增Worker文件，可将计算放入异步任务队列，让主线程优先处理UI渲染后再执行计算（本质仍在主线程，极端长耗时场景仍可能卡顿）：

useEffect(() => {
  if (botTurn) {
    const statusJSON = status(game.fen());
    // 用Promise将计算放入微任务队列
    Promise.resolve()
      .then(() => aiMove(statusJSON, botAi))
      .then(aiMoveIs => {
        console.log(aiMoveIs);
        // 此处更新UI状态
      });

    // 也可使用setTimeout放入宏任务队列
    // setTimeout(() => {
    //   const aiMoveIs = aiMove(statusJSON, botAi);
    //   console.log(aiMoveIs);
    // }, 0);
  }
}, [botTurn, game, botAi]);

关键注意事项 #

• 使用Web Worker时，需确保aiMove无React/DOM相关依赖，所有依赖数据需显式传递。
• 无论哪种方案，都要在组件卸载时清理异步任务/Worker，避免内存泄漏。
• 计算结果返回后，必须通过React的setState更新UI，保证组件响应式渲染。

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