React Native中两种时间延迟代码实现的差异与优劣问询

两种方案的本质与能力差异 #

两种实现底层都依赖标准setTimeout实现延迟逻辑，基础的2秒后修改状态的能力完全一致，但第二种基于Promise封装的wait方案确实具备原生setTimeout没有的拓展能力：

• 支持和async/await语法配合，多串行延迟任务的代码可读性更高。比如你需要先后执行多段延迟逻辑时，不用嵌套多层setTimeout回调，直接按顺序写await wait(2000)即可，避免回调地狱。
• 可以和其他Promise类型的异步逻辑（比如接口请求、本地文件读写）便捷组合。比如需要实现“接口超过2秒没返回就触发超时逻辑”的需求，直接用Promise.race([wait(2000), fetchUserInfo()])就能实现，原生setTimeout要写额外的状态判断逻辑才能达到同样效果。
• 有统一的错误处理范式，后续执行逻辑抛出的异常可以直接通过catch捕获，不需要在每个回调里单独做异常兜底。

鲁棒性对比 #

二者基础鲁棒性完全一致，都存在React Native开发中的常见隐患：组件卸载后定时器还可能触发，导致对已卸载组件调用setState抛出警告，甚至引发内存泄漏。
两种写法要达到生产可用的鲁棒性，都需要补充清理逻辑：

原生setTimeout的清理实现 #

componentDidMount() {
  this.timeoutId = setTimeout(() => {
    this.setState({ editable: true });
  }, 2000);
}

componentWillUnmount() {
  // 组件卸载时清除定时器
  clearTimeout(this.timeoutId);
}

封装wait函数的清理实现 #

由于Promise本身没有取消能力，要做清理需要额外封装取消逻辑，代码量会稍多一点：

const wait = (timeout) => {
  let timeoutId;
  const promise = new Promise(resolve => {
    timeoutId = setTimeout(resolve, timeout);
  });
  return {
    promise,
    cancel: () => clearTimeout(timeoutId)
  }
}

componentDidMount() {
  this.waitTask = wait(2000);
  this.waitTask.promise.then(() => {
    this.setState({ editable: true });
  });
}

componentWillUnmount() {
  // 组件卸载时取消延迟任务
  this.waitTask.cancel();
}

如果都不做清理逻辑，两种方案的鲁棒性没有任何区别，都会存在相同的隐患。

选型建议 #

• 如果只是单次简单延迟执行，两种方案都可以用，原生setTimeout还少了一层Promise封装的微任务开销（当然这个开销极小，基本可以忽略）。
• 如果你的项目已经全面使用async/await做异步管理，或者后续需要拓展复杂的异步流程编排，选第二种wait封装的方案会更符合统一代码风格，后续拓展成本更低。

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