在我的例子中,我面临的问题是,如果没有依赖项数组,计时器怎么会不断更新.

import React, {useEffect, useState} from 'react';

export function App() {
  const [count, setCount] = useState(0);

 useEffect(() => {
    const timerId = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

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


  return (
<div>
      <p>Count: {count}</p>
      </div>
  );
}

我发现,即使我删除了计时器继续运行的useEffect的返回中的清理函数,那么清理函数的用途是什么,为什么它在没有实际传递数组的情况下呈现,我怀疑是谁在说useEffect来重新呈现并将计数的状态更新为+1.

推荐答案

如果没有依赖关系数组,计时器怎么会不断更新.

计时器被更新,因为它的value存储在useEffect之外,所以它不会随着每个useEffect呼叫而被重置.缺点是现在将每隔1000ms调用useEffect一次,并创建并清除一个新的interval实例(从性能和内存管理的Angular 来看,这不是很好).

即使我删除了清除功能(使用中的返回)也会影响计时器继续运行

如果你移除了清理功能,定时器仍然会更新value,但如果你对组件进行unmount,interval仍然会继续运行,这被称为memory leak(它使用浏览器的内存,即使它根本不需要).


更多关于memory leak:https://dev.to/jeremiahjacinth13/memory-leaks-how-to-avoid-them-in-a-react-app-1g5e的信息

Reactjs相关问答推荐

使用useReducer时,props 未从父级传递给子或孙级

为什么我的React App.js只在页面刷新时呈现3次?

对搜索引擎优化来说,react 头盔的异步足够了吗?

Next.js Next-Auth登录函数重定向到http://localhost:3000/api/auth/error

有没有可能在next.js和ssr中使用tsps?

ctx.strokeStyle 在 canvas html 5 中不起作用

如何清除过滤器搜索的状态

Chart.js如何go 除边框

更新对象状态的父数组时记住子组件

如何优化 React 应用程序的性能?

React-router-dom的链接不改变路由(ReactRouter6)

如何将 DocuSign 控制台界面嵌入到 React 应用中

无法从子组件传递数据到父组件

Primereact 的日历组件在每个月 12 日之后使用非唯一键生成

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

Redux Toolkit 配置,是否适用于全栈应用程序?

找不到元素 - 这是参考问题吗?

为什么我不能使用 formik 更改此嵌套对象中的值

Rtk 查询无效标签不使数据无效

下拉菜单在 AppBar 中未正确对齐