首页 > 网络编程 > JavaScript > javascript类库 > React > react hooks页面实时刷新

react hooks页面实时刷新方式(setInterval)

2024-03-12 15:28:02 作者：一车鸡蛋

这篇文章主要介绍了react hooks页面实时刷新方式(setInterval),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1. 实现

页面实时刷新一般用定时器（setInterval（））实现。

定时器：setInterval() - 每多少秒执行一次指定的代码。（执行多次）
延时器：setTimeout() - 多少秒以后执行指定代码。（执行1次）

定时器与延时器均为异步程序，放在异步队列里执行！

2. 注意点

1. 页面使用定时器一定要记得清除。
2. useEffect 的数组依赖不要忘记，不然只执行一次。
3. 也可以使用useRef（为了避免setInterval变量形成闭包）

方式一：使用数组依赖

function Index() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => {
    
    //可以调接口
    //可以存state，如setCount(count + 1)
    //可以调其他函数
 
    }, 1000);
    return () => clearInterval(timer);  //清除定时器不要忘记
  }, [count]);  //数组依赖不要忘记
 
  return <div>{count}</div>;
}

方式二：使用useRef

function Index() {
  const savecallback=useRef(null); //为了避免形成闭包
  function callback(){
    // 可以调其他函数
    // 可以调接口
  }
 
  /*每当组件被重新渲染，useEffect 都会将最新的回调函数赋值给 ref.current，接着 ref.current会被放到 setInterval 里去执行。所以 setInterval 虽只在组件初始化时被启动了一次，但它在执行每次定时任务时，使用的都是最新的回调函数。回调函数不再被困于闭包当中，最新的 state、props 自然能够被取到。*/
  
  useEffect(() => {
    (savecallback as any).current = callback;
  });
 
  useEffect(() => {
    const timer = setInterval(() => {
      (savecallback as any).current();
    }, 1000);
    return () => clearInterval(timer);
  }, []);
 
  return <div>页面</div>;
}

方式三：使用useReducer 状态管理

（对于定时更新某个变量更友好，定时调接口的话还是上边两种更方便一点）

const intitstate= {count: 0};
 
function reducer(state = 0，action) {
  return {count: state.count + 1};
}
 
export default function Index() {
  const [state, dispatch] = useReducer(reducer,intitstate);
 
  useEffect(() => {
    setInterval(() => {
      dispatch();
    }, 1000);
  }, []);
 
  return <div>{state.count}</div>;
}

因为闭包的原因，回调函数无法取到最新的 state，而大多数场景下我们更新 state 前又必须先获取 state 的当前值。

那如何才能够在不读取最新 state 的前提下，对 state 进行增量更新，可以用useReducer 状态管理。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。