在 React 中实现倒计时功能会有什么坑

2025-08-03

1173 字约 4 分钟

...

倒计时

倒计时是一个非常常见的业务场景，但是在 React 中实现起来，却不算简单。

首先我们来看这段倒计时代码，它能否正常执行？

import { useEffect, useState } from 'react';

export function App() {
  const [sec, setSec] = useState(10);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log('倒计时剩余秒数', sec);
      setSec(sec - 1);
      if (sec <= 0) {
        clearInterval(timer);
      }
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <div className='main'>{sec}</div>;
}

来看看实际表现效果

可以看到计时器在不断执行，但是 sec 的值却没有变。

这是一个很经典的问题：React 闭包陷阱 。

我们来详细分析下：useEffect 的依赖数组 [] 是空的，这意味着 effect 只会在组件挂载时执行一次，而不会在 sec 状态更新时重新执行。所以setInterval 回调函数中捕获的 sec 值始终是初始值 10。

这个问题解决起来也很简单，有两种方案，第一种就是在依赖数组中添加 sec，这样每次 sec 更新后都会重新触发 useEffect 执行，更新 sec 的值。

export function App() {
  const [sec, setSec] = useState(10);

  useEffect(() => {
   
  }, [sec]); 

  return <div className='main'>{sec}</div>;
}

第二种方案。使用函数式更新，这样每次更新都会基于最新的状态值，而不是被闭包捕获的初始值。

export function App() {
  const [sec, setSec] = useState(10);

  useEffect(() => {
    const timer = setInterval(() => {
      setSec(pre => { 
        if (pre <= 0) {
          clearInterval(timer);
          return 0;
        }
        return pre - 1;
      });
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <div className='main'>{sec}</div>;
}

什么是闭包

闭包是指函数及其引用的外部词法环境的组合。简单来说，当一个函数能够记住并访问它所在的词法作用域时，即使该函数在其原始作用域之外执行，这就形成了闭包。

这个概念估计大家都看到过很多很多次，但是真正遇到的时候还是一脸懵逼：“还能这样？” 要我说都是 JS 的错，才不是咱们的问题。

再来看一遍这个经典的题目：

function createFunctions() {
  let funcs = [];
  
  for (var i = 0; i < 3; i++) {
    funcs.push(function() {
      console.log(i);
    });
  }
  
  return funcs;
}

const functions = createFunctions();
functions[0](); 
functions[1](); 
functions[2]();

我们在函数中打印了 i 本意是打印 1 2 3 结果却打印了三次 3。

这个问题的重点是：闭包捕获的是变量本身，而不是变量在某个时刻的值。在打印的时刻，i 已经变成了 3 我们无法再获取创建函数那一刻 i 所对应的值。

而这道题的解决方式也特别简单，我们只需要把 var 改成 let 就好了，因为前者是函数作用域，而后者是块级作用域，当我们使用 let i 时，每一次循环都会创建一个新的 i 自然不再会有问题。

深入理解

重温了闭包，再回归我们的问题，为什么在前面的代码，我们没有获取到最新的 sec？

首先从 `useEffect` 的实现来看

在 React 的 Fiber 架构中，每个组件对应一个 Fiber 节点，而 useEffect 会创建一个 effect 对象，被添加到 Fiber 节点的 updateQueue 中：


function mountEffect(create, deps) {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = pushEffect(
    HookHasEffect | HookPassive,
    create,           
    undefined,        
    nextDeps          
  );
}

当组件重新渲染时，React 会比较新旧依赖数组，如果依赖改变就重新创建 effect 对象，否则不更新。


function updateEffect(create, deps) {
  const hook = updateWorkInProgressHook();
  if (areHookInputsEqual(nextDeps, prevDeps)) {
    
    pushEffect(HookPassive, create, destroy, nextDeps);
    return;
  }
  
  
  currentlyRenderingFiber.flags |= PassiveEffect;
  hook.memoizedState = pushEffect(
    HookHasEffect | HookPassive,
    create,
    destroy,
    nextDeps
  );
}

function areHookInputsEqual(nextDeps, prevDeps) {
  
  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (!Object.is(nextDeps[i], prevDeps[i])) {
      return false;
    }
  }
  return true;
}

我们的依赖为空数组，则 effect 回调只在组件挂载时执行一次，之后即使 sec 状态变化，也不会重新创建定时器和闭包，它所引用的 sec 永远是开始的那个。

接下来我们再看 setState

让我们看看 useState 在 React 内部是如何工作的，下面是一个简化的实现：


function useState(initialState) {
  
  const currentFiber = getCurrentFiber();
  
  
  const hook = updateWorkInProgressHook();
  
  if (hook.memoizedState === null) {
    
    hook.memoizedState = initialState;
    hook.baseState = initialState;
  }
  
  
  const newState = processUpdateQueue(hook);
  hook.memoizedState = newState;
  
  
  const setState = createSetStateFunction(currentFiber, hook);
  
  return [hook.memoizedState, setState];
}


function createSetStateFunction(fiber, hook) {
  
  return function setState(action) {
    
    const update = {
      action: action,           
      next: null,              
      priority: getCurrentPriority(),
    };
    
    
    enqueueUpdate(fiber, hook, update);
    
    
    scheduleUpdateOnFiber(fiber);
  };
}



function processUpdateQueue(hook) {
  let newState = hook.baseState;
  let update = hook.queue;
  
  while (update !== null) {
    const action = update.action;
    
    if (typeof action === 'function') {
      
      newState = action(newState);
    } else {
      
      newState = action;
    }
    
    update = update.next;
  }
  
  return newState;
}