原因是传递给setInterval闭包的回调只访问第一次呈现中的时间变量，它不能访问后续呈现中的新时间值，因为第二次没有调用useEffect()。

在setInterval回调函数中，time的值总是0。

与您熟悉的setState一样，状态钩子有两种形式:一种是它接收更新状态的形式，另一种是传递当前状态的回调形式。您应该使用第二种形式，并在setState回调中读取最新的状态值，以确保在增加状态值之前拥有最新的状态值。

好处:可选择的方法 Dan Abramov在他的博客文章中深入讨论了关于使用setInterval和钩子的话题，并提供了解决这个问题的替代方法。强烈推荐阅读!

function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(prevTime => prevTime + 1); // <-- Change this line! }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time => time + 1);// **set callback function here** 
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (
    <div>Seconds: {time}</div>
  );
}

ReactDOM.render(<Clock />, document.querySelector('#app'));

另一种解决方案是使用useReducer，因为它总是被传递当前状态。

function Clock() { const [time, dispatch] = React.useReducer((state = 0, action) => { if (action.type === 'add') return state + 1 return state }); React.useEffect(() => { const timer = window.setInterval(() => { dispatch({ type: 'add' }); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

当时间改变时告诉React重新渲染。选择退出

function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, [time]); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

当提供空输入列表时，useEffect函数只在组件挂载时计算一次。

setInterval的另一个替代方法是在每次状态更新时使用setTimeout设置新的间隔时间:

  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, [time]);

setTimeout对性能的影响很小，一般可以忽略。除非组件对时间敏感，以至于新设置的超时会导致不良影响，否则setInterval和setTimeout方法都是可以接受的。

我从这个博客上抄了代码。所有功劳归于船主。https://overreacted.io/making-setinterval-declarative-with-react-hooks/

唯一的事情是，我把这个React代码改编为React Native代码，所以如果你是一个React Native编码器，只要复制这个，并适应你想要的。很容易适应吧!

import React, {useState, useEffect, useRef} from "react";
import {Text} from 'react-native';

function Counter() {

    function useInterval(callback, delay) {
        const savedCallback = useRef();
      
        // Remember the latest function.
        useEffect(() => {
          savedCallback.current = callback;
        }, [callback]);
      
        // Set up the interval.
        useEffect(() => {
          function tick() {
            savedCallback.current();
          }
          if (delay !== null) {
            let id = setInterval(tick, delay);
            return () => clearInterval(id);
          }
        }, [delay]);
      }

    const [count, setCount] = useState(0);

  useInterval(() => {
    // Your custom logic here
    setCount(count + 1);
  }, 1000);
  return <Text>{count}</Text>;
}

export default Counter;