我的UseEffect要么无限地调用我的API和我的数据显示，要么调用它一次但数据没有显示。 - 腾讯云开发者社区

文章/答案/技术大牛

发布

React-hooks+TypeScript最佳实战

大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。...我们希望它在每次渲染之后执行，但 React 的 class 组件没有提供这样的方法。即使我们提取出一个方法，我们还是要在两个地方调用它。...在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。为什么在组件内部调用 useEffect？...的执行如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可如果想执行只运行一次的 effect（...不能接收 async 作为回调函数React 规定 useEffect 接收的函数，要么返回一个能清除副作用的函数，要么就不返回任何内容。

6.9K5 1

【React】1260- 聊聊我眼中的 React Hooks

调用时序在使用useState的时候，你有没有过这样的疑惑：useState虽然每次render()都会调用，但却可以为我保持住 State，如果我写了很多个，那它怎么知道我想要的是什么 State...，而且也没有语义上的区分（我们仅仅是给返回值赋予了语义），站在 useState的视角，React 怎么知道我什么时候想要name而什么时候又想要age的呢？...「时序」决定了这一切（背后的数据结构是链表），这也导致 Hooks 对调用时序的严格要求。...Lib 的角度看，这种要求调用时序的 API 设计是极为罕见的，非常反直觉。...调用某个函数时要小心翼翼，你需要考虑它有没有引用过时的问题，如有遗漏又没有将其加入依赖数组，就会产生 Bug。

1.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

我在项目里踩过的坑

我就很郁闷啊，明明设置了啊，为什么没有？真相是：我多次调用 setXxx，React 会合并这些更新。但每次都用的是同一个快照的旧值。...但问题来了。有一次，我在删除用户的时候，更新了 users 列表，但忘了更新 totalCount。结果用户界面显示的总数和实际列表数不符。...那个"衍生数据"的坑，差点被我重复踩有一次，我在做一个购物车页面。...用户可以添加/删除商品，我需要显示：购物车里的商品列表购物车总价商品数量一开始我"聪明"地这样做： const [items, setItems] = useState([]); const [...但如果第一个请求失败了，我的 catch 回调会把它改回 true（用的是当时的旧快照）。结果用户的操作就被反转了。这是个经典的闭包陷阱。

2531 0

用动画和实战打开 React Hooks（一）：useState 和 useEffect

因为我想通过这种方式直观地阐述函数式组件的一个重要思想：每一次渲染都是完全独立的。后面我们将沿用这样的风格，并一步步地介绍 Hook 在函数式组件中扮演怎样的角色。...然后通过 useEffect 钩子获取 API 数据，其中有以下需要注意的点：我们通过定义了一个 fetchGlobalStats 异步函数并进行调用从而获取数据，而不是直接把这个 async 函数作为...useEffect 约定 Effect 函数要么没有返回值，要么返回一个 Cleanup 函数。而这里 async 函数会隐式地返回一个 Promise，直接违反了这一约定，会造成不可预测的结果。...恭喜你，成功地用 Hooks 进行了一次数据获取！...最后使用之前创建的两个子组件，传入相应的数据和回调函数。

3.2K2 0

【React】883- React hooks 之 useEffect 学习指南

这篇文章是很好的入门，介绍了如何在useEffect里做数据请求。请务必读完它！它没有我的这篇这么长。[]表示effect没有使用任何React数据流里的值，因此该effect仅被调用一次是安全的。...先渲染属性A，B再渲染C，和立即渲染C并没有什么区别。虽然他们可能短暂地会有点不同（比如请求数据时），但最终的结果是一样的。不过话说回来，在每一次渲染后都去运行所有的effects可能并不高效。...当我们理所当然地把它用useEffect的方式翻译，直觉上我们会设置依赖为[]。“我只想运行一次effect”，对吗？...但总的来说Hooks本身能更好地避免传递回调函数。在上面的例子中，我更倾向于把fetchData放在我的effect里（它可以抽离成一个自定义Hook）或者是从顶层引入。...我想让effects保持简单，而在里面调用回调会让事情变得复杂。（“如果某个props.onComplete回调改变了而请求还在进行中会怎么样？”）

7.1K3 0

useEffect 的阴暗面

但就像一把双刃剑，用好了能让代码优雅高效，用不好就是性能杀手和 bug 制造机。今天咱们就来聊聊 useEffect 的那些坑，以及如何优雅地避开它们。...常见使用场景在实际开发中，useEffect 最常见的几个用途包括： • 数据获取：组件挂载时从 API 拉取数据，或者当某个参数变化时重新拉取数据。...解决方案：在 useEffect 中返回一个清理函数，React 会在组件卸载或副作用重新执行前调用它。...有时候你的 useEffect 虽然没有 bug，但执行得太频繁了，导致性能问题。...// 性能问题示例 function ExpensiveComponent({ user }) { useEffect(() => { // 执行昂贵的操作，比如复杂的计算或 API 调用

1821 0

解决前端常见问题：竞态条件

Article 组件中，我们把相关的数据请求封装到了自定义 hook "useArticleLoading" 中，为了页面的使用体验，我们要么显示获取的数据，要么显示加载中。...在 React 中可以很巧妙的通过 useEffect 的执行机制来简洁、方便地做到这点： useArticlesLoading.tsx useEffect(() => { let didCancel...articles/1 了，访问 articles/2 useArticleLoading 重新渲染执行，重新渲染前执行了上一次的 useEffect 返回函数，把 didCancel 设置为 true...使用方法很简单，创建 AbortController 实例，并在发出请求时使用它： useEffect(() => { const abortController = new AbortController...请求服务器获取 articles/2 数据获取到 articles/2 数据并渲染到页面上第一个文章从未完成加载，因为我们手动终止了请求可以在开发工具中查看手动中断的请求：调用 abortController.abort

1.7K2 0

实战 React 18 中的 Suspense

它也让很多开发人员，包括我，意识到我们错误地使用了useEffect hook。但话说回来，我们被其名称所误导了，因为实际上useEffect并不应该被用于副作用。...在 React 18 中，虽然仍然可以使用useEffect来完成一些事情，如使用 API 接口读取的数据填充状态，但实际上不应该将其用于此类目的。...在这里我使用了axios，但你可以根据自己的需要使用任何东西。在组件中读取数据当获取方面的所有内容都准备好后，我们来在组件中使用它。假设有一个简单的组件，只需从某个接口读取名称列表并打印。...不同于习惯中在组件中通过useEffect钩子调用 fetch 的做法，这一次我们要直接在组件开始时（放在任何 hooks 之外），使用我们在包装器中导出的read方法来调用请求，因此我们的Names组件大概是这个样子的...或其他什么你需要的自定义组件。结论长时间使用useEffect以实现相同的结果后，当我第一次看到 Suspanse 这种用法时，我对这种新方法有些怀疑。包装获取库的整个过程有点让人生疑。

1.3K1 0

调试 RxJS 第1部分: 工具篇

我是一位 RxJS 信徒，在我所有活跃的项目中都在使用它。用了它之后，我发现很多乏味的事现在都变得很简单。然而，有一件事却没有任何好转，那就是调试。...由于以下几点原因，我对这种方法并不满意：我总是在不断地添加日志，调试的同时还要更改代码调试完成后，对于日志，我要么一条条的进行手动删除，要么选择忍受匆忙之中将 do 操作符随意放置在一个组合 observable...大多数时候，我都是在应用的启动代码中早早地调用模块 API 的 spy 方法，然后使用控制台 API 来执行剩下的调试工作。...模块 API 的大部分方法会返回一个拆解函数，它用来解除方法的调用。在控制台中管理这些太麻烦了，所以还有另外一种选择。调用 rxSpy.undo() 会显示所有调用过的方法的列表： ?...很容易会忘记将返回的 deck 赋值给了哪个变量，所以控制台 API 还提供了 deck 方法，它的行为类似于 undo 方法。调用它会显示所有 pause 调用的列表： ?

1.8K4 0

Vue 选手转 React 常犯的 10 个错误，你犯过几个？

看下面这个例子：可能你想当然他会在 items 为空数组的时候显示 ShoppingList 组件。但实际上却显示了一个 0！...=== props，react就可以确定它内部并没有发生变化新功能：react正在构建的新功能依赖将状态视为快照，如果你正在更新过去的状态版本，这会导致无法使用新功能需求变更：一些需要撤销/重做和显示历史记录的值...每当 key 发生变化时，React 就会销毁并重新创建这些元素，这对性能会产生很大的负面影响。这种模式，在第一次创建数据时生成 key，可以应用于各种情况。...例如，这里是我从服务器获取数据时创建唯一ID的方法： async function retrieveData() { const res = await fetch('/api/data');...中的异步方法假设我们在 useEffect 中请求 API，从中获取一些服务端数据，通常需要将请求方法写成异步的，比如这样： import React, { useEffect } from 'react

9321 0

性能提升实战：useEffectEvent 优化供应链大屏的实时数据渲染

传统的React组件设计模式在处理如此高频率、多来源的实时数据流时，常常陷入性能瓶颈：要么因过度重渲染导致界面卡顿，要么因闭包陷阱引发数据展示滞后或错误。...，使回调函数"凝固"在过去的渲染闭包中，无法获取最新的数据。...，处理函数由于困在旧的闭包中，显示的数据比实际数据慢数个版本。...错误的预警阈值比较：预警功能需要将实时数据与动态阈值进行比较，但陈旧的闭包可能导致阈值判断错误，错过关键预警。物流轨迹更新延迟：地图上的物流轨迹点应该实时更新，但过时的闭包会使轨迹显示滞后于实际位置。...动态闭包管理：虽然函数引用稳定，但内部通过一个ref始终指向最新的回调函数实现，确保执行时能访问到最新的props和state。

1192 0

一段奇遇的开始：当一名游戏开发者决定“氪金”升级装备

但，光鲜亮丽的表面之下，藏着的是一个个难言之隐……你是否也经历过和我一样的场景？窗口的俄罗斯方块：27 寸的 16:9 屏幕上，代码编辑器、游戏引擎、API 文档、调试窗口挤作一团。...直到在一次被某个诡异的Bug 折磨到凌晨三点，我顶着布满红血丝的眼睛刷着技术论坛，无意间瞥见有程序员推荐了一款专业的编程显示器，瞬间击中了我的所有痛点，原来我们程序员是有专用的编程显示器的。...我几乎没有犹豫，快速打开电商平台，3：2的屏幕比例、硬件级护眼技术，专门的“编码模式”等等，这不正是我所需要的吗？于是我便怀着一种近乎“朝圣”的心情，在电商平台按下了“立即购买”的按钮。...这对我来说，不仅是一次设备升级，更是一次对我自己生产力和健康的“氪金”投资。几天后，一个硕大的箱子送到了我的办公室。...普通显示器调暗后，代码要么偏色成「阴间画风」，要么模糊得像打码；RD280U 却能保持「高清素颜」，改完500 Internal Server Error，还能精神抖擞地爬去睡觉。

2512 1

亲手打造属于你的 React Hooks

我们将调用这个函数 handleCopy。 handleCopy 在这个函数中，我们首先需要确保它只接受字符串或数字类型的数据。我们将建立一个 if-else 语句，它将确保类型是字符串或数字。...添加SSR支持然而，我们这里的代码将不能工作。这是因为hook的一个关键规则是不能有条件地调用它们。因此，在useState或useEffect钩子被调用之前，不能有一个条件钩子。...，调用它，并在想要隐藏或显示某些元素的地方使用宽度。...但当我着眼于移动平台时，我发现所有内容都是不合适的，并且都是破碎的。我追踪这个问题到一个名为react-device-detect的库，我用它来检测用户是否有移动设备。如果是，我将删除标题。...由于与作为API /外部资源的窗口API交互将被归类为副作用，所以我们需要访问useEffect钩子中的用户代理。

11.4K6 0

第七篇：React-Hooks 设计动机与工作模式（下）

，比如操作 DOM、订阅事件、调用外部 API 获取数据等。...如下面代码所示： useEffect(callBack, []) useEffect 用什么姿势来调用，本质上取决于你想用它来达成什么样的效果。...下面我们就以效果为线索，简单介绍 useEffect 的调用规则。 1. 每一次渲染后都执行的副作用：传入回调函数，不传依赖数组。调用形式如下所示： useEffect(callBack) 2....仅在挂载阶段执行一次的副作用：传入回调函数，且这个函数的返回值不是一个函数，同时传入一个空数组。调用形式如下所示： useEffect(()=>{ // 这里是业务逻辑 }, []) 3....其实你只要记住，如果你有一段 effect 逻辑，需要在每次调用它之前对上一次的 effect 进行清理，那么把对应的清理逻辑写进 useEffect 回调的返回函数（上面示例中的 B 函数）里就行了。

1.1K1 0

使用React Hooks 时要避免的5个错误！

不要更改 Hook 调用顺序不要使用过时状态不要创建过时的闭包不要将状态用于基础结构数据不要忘记清理副作用 1.不要更改 Hook 调用顺序在写这篇文章的前几天，我编写了一个通过id获取游戏信息的组件...组件正确地执行获取操作，并使用获取的数据更新状态。但是看看tab Eslint警告: 有 Hook 执行顺序不正确的问题。...但是，如果 id不为空（例如等于'1'），则会调用useState()和 useEffect()。有条件地执行 Hook 可能会导致难以调试的意外错误。...为了防止闭包捕获旧值：确保提供给 Hook 的回调函数中使用依赖项。 4.不要将状态用于基础结构数据有一次，我需要在状态更新上调用副作用，在第一个渲染不用调用副作用。...总结从React钩子开始的最好方法是学习如何使用它们。但你也会遇到这样的情况:你无法理解为什么他们的行为与你预期的不同。知道如何使用React Hook还不够:你还应该知道何时不使用它们。

5.9K3 0

useTransition真的无所不能吗？🤔

但一旦状态更新被触发，React会义无反顾「同步地计算所有必要的更新，重新渲染所有需要重新渲染的组件」，将这些更改提交到DOM，以便它们显示在屏幕上。...所以，它们为我们带来了，新的渲染方式和API来处理上面的顽疾。我们先下一个结论。...在我们的情况下，简单地包装我们的页面组件就可以了，并且它们没有任何props，所以我们可以直接渲染它们： // .... import { A, B, C } from "@components/Content...data) return 'loading' return ... // 在数据可用时渲染大量数据 } 在这种情况下，如果没有数据，我们只返回一个加载状态，这不太可能很耗时。...它的工作方式类似于useTransition，允许我们「将某些更新标记为非关键并将它们移至后台」。通常建议在没有访问状态更新函数时使用它，例如，当值来自props时。

1.1K1 0

【React】945- 你真的用对 useEffect 了吗？

在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。为什么在组件内部调用 useEffect？...因为我们在每次请求数据之后都会设置本地的状态，所以组件会更新，因此useEffect会再次执行，因此出现了无限循环的情况。我们只想在组件mount时请求数据。...知道useEffect会比较前一次渲染和后一次渲染的值，然后我就在想，如果我所设置的data=[],那么即使我后一次渲染的data也为[],那么[]===[]为false,所以才会造成useEffect...但这会带来另一个问题：query的任何一次变动都会请求后端，这样会带来比较大的访问压力。这个时候我们需要引入一个按钮，点击这个按钮再发起请求。...我们可以看到useEffect的依赖数据中并没有添加loading，这是因为，我们不需要再loading变更时重新调用useEffect。

10.8K2 0

能把队友气死的8种屎山代码(React版)

例如我们项目中，这个useEffect内部执行的是第一点中的内容，即每次都会绑定一个scroll事件的回调，而且页面中有实时轮询接口每隔5s刷新一次列表，用户在该页面稍加停留，就会有卡顿问题出现。...解决方案很简单，根据useEffect的回调函数内容可知，如果需要在第一次渲染之后挂载一个scroll的回调函数，那么就给useEffect第二个参数传入空数组即可，参考官方文档(https://react.dev...硬编码硬编码，即一些数据信息或配置信息直接写死在逻辑代码中，例如这两行代码本意是从url上拿到指定的参数的值，如果没有，会用一个固定的配置做兜底。...解决此类问题，要么将这些内容配置化，即写到一个config文件中，使用清晰的语义化命名变量；要么，至少在硬编码的地方写上注释，交代清楚这里需要硬编码的前因后果。...三元选择符嵌套使用网上很多人会推荐说用三元选择符代替简单的if-else，但几乎没有见过有人提到嵌套使用三元选择符的事情，如果看到如下代码，不知道各位读者会作何感想？

1.1K3 0

从依赖到解耦：useEffectEvent 如何重塑供应链看板的副作用管理

传统的useEffect在处理供应链看板的实时数据流时，常常面临一个两难选择：要么因为依赖项过多导致不必要的重渲染和性能损耗，要么因为闭包陷阱造成数据展示滞后或逻辑错误。...它通过分离响应式逻辑与非响应式逻辑，让开发者能够更精确地控制副作用的执行时机，从根本上改善了供应链看板的副作用管理体验。...5最佳实践与迁移策略5.1渐进式迁移策略对于现有的供应链看板系统，推荐采用渐进式迁移策略：第一阶段：识别问题点//1.使用ESLint插件识别依赖问题useEffect(()=>{//某些依赖没有被声明...，我们可以看到useEffectEvent不仅仅是一个新的API，更是React副作用管理的一次范式转变。...在供应链场景的特殊意义：对于新零售供应链这种数据驱动、实时性强、业务复杂的领域，useEffectEvent提供了一种更加优雅的解决方案：库存同步的稳定性：确保实时库存数据准确无误，避免因闭包问题导致的显示错误订单追踪的可靠性

1461 0

你应该会喜欢的5个自定义 Hook

现在，来看看我在开发中最常用的 5 个自定义钩子，并头开始重新创建它们，这样你就能够真正理解它们的工作方式，并确切地了解如何使用它们来提高生产率和加快开发过程。...我们直接开始创建我们的第一个自定义React Hooks。 useFetch 获取数据是我每次创建React应用时都会做的事情。我甚至在一个应用程序中进行了好多个这样的重复获取。...不管我们选择哪种方式来获取数据，Axios、Fetch API，还是其他，我们很有可能在React组件序中一次又一次地编写相同的代码。...因此，我们看看如何构建一个简单但有用的自定义 Hook，以便在需要在应用程序内部获取数据时调用该 Hook。 okk,这个 Hook 我们叫它 useFetch。... ); } export default App; useDarkMode 这个是我的最爱。它能轻松快速地将暗模式功能应用于任何React应用程序。

8.8K2 0

点击加载更多

React-hooks+TypeScript最佳实战

【React】1260- 聊聊我眼中的 React Hooks

我在项目里踩过的坑

用动画和实战打开 React Hooks（一）：useState 和 useEffect

【React】883- React hooks 之 useEffect 学习指南

useEffect 的阴暗面

解决前端常见问题：竞态条件

实战 React 18 中的 Suspense

调试 RxJS 第1部分: 工具篇

Vue 选手转 React 常犯的 10 个错误，你犯过几个？

性能提升实战：useEffectEvent 优化供应链大屏的实时数据渲染

一段奇遇的开始：当一名游戏开发者决定“氪金”升级装备

亲手打造属于你的 React Hooks

第七篇：React-Hooks 设计动机与工作模式（下）

使用React Hooks 时要避免的5个错误！

useTransition真的无所不能吗？🤔

【React】945- 你真的用对 useEffect 了吗？

能把队友气死的8种屎山代码(React版)

从依赖到解耦：useEffectEvent 如何重塑供应链看板的副作用管理

你应该会喜欢的5个自定义 Hook

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐