如何解决React useEffect钩子带来的无限循环问题

目录
  • 什么导致的无限循环以及如何解决它们
  • 如何解决这个问题
  • 使用函数作为依赖项
  • 使用数组作为依赖项
  • 将对象作为依赖项传递
  • 传递不正确的依赖项
  • 结尾

React的useEffect Hook可以让用户处理应用程序的副作用。例如:

  • 从网络获取数据:应用程序通常在第一次加载时获取并填充数据。这可以通过useEffect函数实现
  • 操作UI:应用程序应该响应按钮点击事件(例如,打开一个菜单)
  • 设置或结束计时器:如果某个变量达到预定义值,则内置计时器应自行停止或启动

尽管useEffect Hook在React生态系统中很常见,但它需要时间来掌握。因此,许多新手开发人员在配置他们的useEffect函数时,会导致无限循环问题。在本文中,您将了解不同场景下带来的无限循环问题以及如何解决它们。

这是我们今天要学习的内容:

是什么导致无限循环以及如何解决它们:

  • 在依赖项数组中不传递依赖项
  • 使用函数作为依赖项
  • 使用数组作为依赖项
  • 使用对象作为依赖项
  • 传递不正确的依赖项

什么导致的无限循环以及如何解决它们

在依赖项数组中不传递依赖项

如果您的useEffect函数不包含任何依赖项,则会出现一个无限循环。

例如,看看下面的代码:

function App() {
  const [count, setCount] = useState(0); //初始化值
  useEffect(() => {
    setCount((count) => count + 1);
  }); //无依赖项
  return (
    <div className="App">
      <p> value of count: {count} </p>
    </div>
  );
}

如果没有依赖关系,则默认在每个更新周期上触发useEffect。因此,这里的应用程序将在每次渲染时执行setCount函数。因此,这会导致一个无限循环:

是什么导致了这个问题?让我们一步一步来分析这个问题:

  • 在第一次渲染时,React会检查count的值。在这里,由于count为0,程序执行useEffect函数
  • 稍后,useEffect调用setCount方法并更新count的值
  • 之后,React重新呈现UI以显示count的更新值
  • 此外,由于useEffect在每个呈现周期中运行,它将重新调用setCount函数
  • 由于上述步骤发生在每一个渲染,这导致你的应用程序崩溃

如何解决这个问题

为了缓解这个问题,我们必须使用依赖数组告诉React只有在特定值更新时才调用useEffect。

下一步,像这样附加一个空白数组作为依赖项:

useEffect(() => {
  setCount((count) => count + 1);
}, []); //empty array as second argument.

这告诉React在第一次装载时执行setCount函数。

使用函数作为依赖项

如果你把一个方法传入你的useEffect依赖数组,React会抛出一个错误,表明你有一个无限循环:

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

  function logResult() {
    return 2 + 2;
  }
  useEffect(() => {
    setCount((count) => count + 1);
  }, [logResult]); // 函数作为依赖项
  return (
    <div className="App">
      <p> value of count: {count} </p>
    </div>
  );
}

在这段代码中,我们将logResult方法传递给useEffect数组。理论上,React只需要在第一次渲染时增加count的值。

是什么导致了这个问题?

  • 要记住的一件事是,useEffect使用了一个叫做浅比较的概念。它这样做是为了验证依赖项是否已经更新
  • 这里的问题是,在每次呈现期间,React都会重新定义logResult的引用
  • 因此,这将在每个循环中重新触发useEffect函数
  • 因此,React会调用setCount钩子,直到应用程序遇到更新深度错误。这会给程序带来错误和不稳定性

如何解决这个问题

一个解决方案是使用useCallback钩子。这允许开发人员记住他们的函数,从而确保引用值保持不变。由于这个参考值是稳定的,React不应该无限地重新渲染UI:

const logResult = useCallback(() => {
  return 2 + 2;
}, []); // logResult是缓存的
useEffect(()=> {
  setCount((count)=> count+1);
},[logResult]); //没有无限循环错误,因为logResult引用保持不变。

结果:

使用数组作为依赖项

将数组变量传递给依赖项也会运行一个无限循环。考虑下面的代码示例:

const [count, setCount] = useState(0); //初始值为0。
const myArray = ["one", "two", "three"];

useEffect(() => {
  setCount((count) => count + 1); // 和前面一样,增加Count的值
}, [myArray]); // 将数组变量传递给依赖项

在这个块中,我们将myArray变量传入依赖参数。

是什么导致了这个问题?

既然myArray的值在整个程序中都没有改变,为什么我们的代码会多次触发useEffect ?

  • 在这里,回想一下React使用浅比较来检查依赖项的引用是否发生了变化。
  • 由于对myArray的引用在每次渲染时都在变化,useEffect将触发setCount回调
  • 因此,由于myArray的引用值不稳定,React将在每个渲染周期中调用useEffect。最终,这会导致应用程序崩溃

如何解决这个问题

为了解决这个问题,我们可以使用useRefHook这将返回一个可变对象,确保引用不会改变:

const [count, setCount] = useState(0);
//提取“current”属性并给它赋值
const { current: myArray } = useRef(["one", "two", "three"]);

useEffect(() => {
  setCount((count) => count + 1);
}, [myArray]); //依赖值是稳定的,所以没有无限循环

将对象作为依赖项传递

在useEffect依赖数组中使用对象也会导致无限循环问题。

考虑下面的代码:

const [count, setCount] = useState(0);
const person = { name: "Rue", age: 17 }; //创建一个对象
useEffect(() => {
  // 每次增加count的值
  // person的值发生了变化
  setCount((count) => count + 1);
}, [person]); // 依赖项数组包含一个对象作为参数
return (
  <div className="App">
    <p> Value of {count} </p>
  </div>
);

控制台的结果表明程序是无限循环的:

是什么导致了这个问题?

  • 和之前一样,React使用浅比较来检查person的参考值是否发生了变化
  • 因为person对象的引用值在每次渲染时都会改变,所以React会重新运行useEffect
  • 因此,在每个更新周期中调用setCount。这意味着我们现在有了一个无限循环

如何解决这个问题

那么我们如何解决这个问题呢?

这就是usemmo的用武之地。**当依赖关系发生变化时,这个钩子会计算一个记忆的值。**除此之外,因为我们记住了一个变量,这确保了状态的引用值在每次渲染期间不会改变:

// 使用usemo创建一个对象
const person = useMemo(
  () => ({ name: "Rue", age: 17 }),
  [] //没有依赖关系,所以值不会改变
);
useEffect(() => {
  setCount((count) => count + 1);
}, [person]);

传递不正确的依赖项

如果将错误的变量传递给useEffect函数,React将抛出一个错误。

下面是一个简单的例子:

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

useEffect(() => {
  setCount((count) => count + 1);
}, [count]); //注意,我们将count传递给了这个数组。

return (
  <div className="App">
    <button onClick={() => setCount((count) => count + 1)}>+</button>
    <p> Value of count{count} </p>
  </div>
);

是什么导致了这个问题?

  • 在上面的代码中,我们告诉在useEffect方法中更新count的值
  • 此外,注意我们也将count Hook传递给了它的依赖数组
  • 这意味着每次count值更新时,React都会调用useEffect
  • 因此,useEffect钩子调用setCount,从而再次更新count
  • 因此,React现在在一个无限循环中运行我们的函数

如何解决这个问题

要摆脱无限循环,只需像这样使用一个空的依赖数组:

const [count, setCount] = useState(0);
// 只有在组件首次挂载时才更新'count'的值
useEffect(() => {
  setCount((count) => count + 1);
}, []);

这将告诉React在第一次渲染时运行useEffect。

结尾

尽管React Hooks是一个简单的概念,但是在将它们整合到项目中时,仍然需要记住许多规则。这将确保您的应用程序保持稳定,优化,并在生产过程中不抛出错误。

此外,最近发布的Create React App CLI也会在运行时检测和报告无限循环错误。这有助于开发人员在这些问题出现在生产服务器上之前发现并解决这些问题。

到此这篇关于如何解决React useEffect钩子带来的无限循环问题的文章就介绍到这了,更多相关React useEffect钩子无限循环内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React useEffect的理解与使用

    React16.8新增的useEffec这个hook函数就是处理副作用的. 所谓的"副作用",举个通俗一点的例子,假如感冒了本来吃点药就没事了,但是吃了药发现身体过敏了,而这个"过敏"就是副作用. 放到React中,本来只是想渲染DOM展示到页面上,但除了DOM之外还有数据,而这些数据必须从外部的数据源中获取,这个"获取外部数据源"的过程就是副作用. useEffect怎么用可以参考官网给出的例子,这里主要针对使用useEffect过程中遇到的问

  • React useEffect异步操作常见问题小结

    目录 三个常见的问题: 一.react hooks发异步请求 二.如何在组件加载的时候发起异步任务 三.如果在响应回来之前组件被销毁了会怎样? 四.如何在组件交互时发起异步任务 为什么两种写法会有差异呢? 五.其他陷阱 总结 useEffect 和异步任务搭配使用的时候会遇到的一些坑总结. 三个常见的问题: 1.如何在组件加载的时候发起异步任务 2.如何在组件交互的时候发起异步任务 3.其他陷阱 一.react hooks发异步请求 1.使用useEffect发起异步任务,第二个参数使用空数组可

  • 浅谈react useEffect闭包的坑

    问题代码 看一段因为useEffect导致的闭包问题代码 const btn = useRef(); const [v, setV] = useState(''); useEffect(() => { let clickHandle = () => { console.log('v:', v); } btn.current.addEventListener('click', clickHandle) return () => { btn.removeEventListener('clic

  • React中useEffect 与 useLayoutEffect的区别

    目录 前置知识 useEffect commitBeforeMutationEffects commitMutationEffects commitLayoutEffects 后续阶段 useLayoutEffect 结论 前置知识 我们可以将 React 的工作流程划分为几大块: render 阶段:主要生成 Fiber节点 并构建出完整的 Fiber树 commit 阶段:在上一个render 阶段中会在 rootFiber 上生成一条副作用链表,应用的DOM操作就会在本阶段执行 commi

  • React-hooks中的useEffect使用步骤

    目录 1.理解函数副作用 什么是副作用? 常见的副作用 2.基础使用 使用步骤 示例代码 3.依赖项控制 useEffect 永远是在 DOM渲染完成之后执行 1.理解函数副作用 什么是副作用? 对于React组件来说,主作用是根据数据(state/props)渲染UI,除此之外都是副作用(比如手动修改DOM.发送ajax请求). 常见的副作用 数据请求(发送ajax) 手动修改 DOM localstorage操作 useEffect 函数的作用就是为react函数组件提供副作用 2.基础使用

  • 关于 React 中 useEffect 使用问题浅谈

    目录 前言 优化前 优化后 总结 前言 最近看了一下 ant-design 中的 tree 组件源码时发现 useEffect 中根据 props 来计算当前函数组件的 state 的,感到好奇,因为这样会导致应用重新绘制一次,这样才复杂场景下会对应用有一定的性能影响.为了验证自己猜想是否正确做了一下实践.这里的 React 是官方 16.12.0的源码. 优化前 import * as React from './react-source/packages/react' import * as

  • 如何解决React useEffect钩子带来的无限循环问题

    目录 什么导致的无限循环以及如何解决它们 如何解决这个问题 使用函数作为依赖项 使用数组作为依赖项 将对象作为依赖项传递 传递不正确的依赖项 结尾 React的useEffect Hook可以让用户处理应用程序的副作用.例如: 从网络获取数据:应用程序通常在第一次加载时获取并填充数据.这可以通过useEffect函数实现 操作UI:应用程序应该响应按钮点击事件(例如,打开一个菜单) 设置或结束计时器:如果某个变量达到预定义值,则内置计时器应自行停止或启动 尽管useEffect Hook在Rea

  • iOS开发中使用UIScrollView实现无限循环的图片浏览器

    一.概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件都介绍一遍确实没有必要,所谓授人以鱼不如授人以渔,这里会尽可能让大家明白其中的原理,找一些典型的控件进行说明,这样一来大家就可以触类旁通.今天我们主要来看一下UIScrollView的内容: UIView UIScrollView 实战--图片浏览器 二.UIView 在熟悉UIScrollView之前很有必要说一下UIView的内容.

  • 解决React报错React Hook useEffect has a missing dependency

    目录 总览 禁用规则 依赖移入 依赖移出 useMemo useCallback 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing dependency"警告.为了解决该错误,禁用某一行的eslint规则,或者将变量移动到useEffect钩子内. 这里有个示例用来展示警告是如何发生的. // App.js import React, {useEffect, useState}

  • 解决react中useState状态异步更新的问题

    目录 疑惑 状态异步更新带来的问题 问题示例 问题解决 类组件的解决方案 函数组件的解决方案 其他解决方案 结尾 疑惑 相信刚开始使用react函数组件的小伙伴也遇到过一个坑,就是 useState 更新状态是异步更新的,但是react 并没有提供关于这个问题的解决方案.那我们能否使用自己的方法来解决这个问题呢?答案肯定是可以的. 状态异步更新带来的问题 就拿一个比较常见的场景来说.在react项目中,我们想在关闭对话框后再去处理其他业务.但是 useState 的状态是异步更新的.我们通过se

  • React Hooks钩子中API的使用示例分析

    目录 hooks是什么 Hooks的作用 使用Hooks组件前后开发模式的对比 Hooks使用策略 为什么要有Hooks useState useEffect使用 useEffect依赖项 使用情景 useMemo使用 useMemo缓存组件方式 useMemo和useEffect的区别 useCallback使用 useContext使用 useRef使用 为什么在函数组件中无法使用ref 如何在类组件中使用ref属性 自定义hooks hooks是什么 hooks理解字面意思就是钩子,是一些

  • 解决React报错Cannot assign to 'current' because it is a read-only property

    目录 总览 正确的泛型 DOM元素 总览 当我们用一个null值初始化一个ref,但在其类型中不包括null时,就会发生"Cannot assign to 'current' because it is a read-only property"错误.为了解决该错误,请在ref的类型中包含null.比如说,const ref = useRef<string | null>(null) . 这里有个例子来展示错误是如何发生的. // App.tsx import {useEf

  • React useEffect使用教程

    目录 一.每一次渲染都有它自己的 Props and State 二.每次渲染都有它自己的Effects 三.关于依赖项不要对React撒谎 四.两种诚实告知依赖的方法 五.来自useReducer的助攻 六.把函数移到Effects里 七.我不想把可复用的函数放到Effect里 这篇文章会假设你对useEffectAPI有一定程度的了解. 一.每一次渲染都有它自己的 Props and State 在我们讨论 effects 之前,我们需要先讨论一下渲染,当我们更新 state 的时候,Rea

  • 解决React hook 'useState' cannot be called in a class component报错

    目录 总览 函数组件 类组件中使用setState() 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class component"错误.为了解决该错误,请将类组件转换为函数组件.因为钩子不能在类组件中使用. 这里有个例子用来展示错误是如何发生的. // App.js import {useState, useEffect} from 'react'; class Example

  • 解决React报错Rendered more hooks than during the previous render

    目录 总览 顶层调用 条件之上 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Rendered more hooks than during the previous render"错误.为了解决该错误,将所有的钩子移到函数组件的顶层,以及不要在条件中使用钩子. 这里有个示例用来展示错误是如何发生的. // App.js import {useEffect, useState} from 'react'; export default function App

  • React useEffect的理解与使用

    目录 useEffect 介绍 特殊情况处理 useEffect 介绍 如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合. componentDidMount 组件挂载 componentDidUpdate 组件更新 componentWillUnmount 组件将要摧毁 使用方法 情况一: useEffect需

随机推荐