如何阻止React Native中useEffect外部未调用函数随定时器重复执行

问题根因 #

你遇到的现象是React函数组件的重渲染机制导致的：你在setInterval中每10毫秒调用setTime更新状态，只要组件状态发生变化，整个函数组件就会重新执行一次，所有写在组件顶层（没有放在钩子、事件回调内部）的代码都会逐行运行，所以你写在useEffect外的函数如果是直接调用的形式，自然会每10毫秒自动执行一次。

对应解决方法 #

1. 移除组件顶层的函数直接调用 #

检查你的代码，不要在组件顶层直接调用按钮触发的函数，只需要把函数绑定到按钮的onPress属性即可，错误写法示例和修正参考如下：

// 错误写法示例
const StopWatch = () => {
  const [time, setTime] = useState('00:00:00:00')
  const [timerOn, setTimerOn] = useState(false)

  const handlePress = () => {
    console.log('按钮触发')
  }
  // 错误：组件顶层直接调用函数，每次渲染都会执行
  handlePress()

  // 你的useEffect逻辑省略
  return <Button onPress={handlePress} title="按钮"/>
}

删除顶层的handlePress()调用后，函数就只会在按钮点击时触发。

2. 优化函数避免重复创建（可选） #

如果你的函数逻辑比较复杂，不想每次组件重渲染都重新创建函数实例，可以用useCallback钩子包裹函数，只在依赖的状态变化时才更新函数：

import { useCallback } from 'react'

// 用到什么外部状态就往依赖数组里加什么
const handlePress = useCallback(() => {
  console.log('当前计时：', time)
}, [time])

3. 现有定时器逻辑优化（可选） #

你贴出的useEffect代码有冗余逻辑，可以调整清理逻辑避免无效调用：

useEffect(() => {
  let interval = null;

  if (timerOn) {
    const startTime = Date.now();
    interval = setInterval(() => {
      const currentTime = Date.now() - startTime;
      const hours = padToTwo(Math.floor((currentTime / 3600000) % 24));
      const minutes = padToTwo(Math.floor((currentTime / 60000) % 60));
      const seconds = padToTwo(Math.floor((currentTime / 1000) % 60));
      const centiseconds = padToTwo(currentTime % 100);
      setTime(`${hours}:${minutes}:${seconds}:${centiseconds}`);
    }, 10);
  }

  // 统一写清理逻辑，不用在else分支重复调用
  return () => clearInterval(interval);
}, [timerOn]);

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