React useEffect 两个参数你用对了吗，这也许是最全的使用说明书

最新推荐文章于 2024-04-17 20:46:08 发布
最新推荐文章于 2024-04-17 20:46:08 发布
阅读量7.8k 收藏 82
点赞数 25
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Android062005/article/details/125200236
版权

阅读本文你将了解到

  • useEffect的构成
  • useEffect第一个参数
  • useEffect第二个参数
  • 使用useEffect模拟react生命周期

截屏2022-03-25 17.37.22.png

1. useEffect的构成

carbon (3).png

用途：

  • 获取数据
  • 事件监听或订阅
  • 监控/改变DOM
  • 设置定时器，输出日志
  • 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。

2. 参数一：effect

第一个参数是一个函数，必传项。是组件要执行的副作用。可以看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect(() => {
    console.log('执行副作用');   // 普通函数，执行副作用，可以实现componentDidMount、componentDidUpdate
    return () => {             // return函数, 组件销毁时清除副作用，可以实现componentWillUnmount
        console.log("清除副作用");
    };
}, [count]);
复制代码

3. 参数二：deps

第二个参数可以不传或者是一个数组，非必传项。数组里面依赖改变时候副作用函数才会重新更新。所谓依赖改变就是 [ 之前值 === 之后值 ] ，如果为true不执行useEffect，为false重新执行useEffect。

第二个参数可以是

  1. 不传
  2. 空数组
  3. 由基本类型或者引用类型组成的数组

1. 不传值

const [count, setCount] = useState<number>(1);
useEffect(() => {
    setTimeout(() => {
        setCount(count + 1);
    }, 1000);
    console.log(`第二个参数: 不传值, 第 ${count} 次执行`);
});
// 打印log，无限循环
第二个参数: 不传值, 第 1 次执行
第二个参数: 不传值, 第 2 次执行
第二个参数: 不传值, 第 3 次执行
第二个参数: 不传值, 第 ... 次执行
复制代码

现象： useEffect 会在第一次渲染以及每次更新渲染后都执行。

截屏2022-03-20 22.37.03.png

原因： 第一次渲染后执行一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect没有比较值，useEffect重新执行，useEffect中回调函数改变state值，state值改变触发组件重新渲染，无限循环。

⚠️ 不传值是一种缺失依赖关系的情况，不建议这么做。

2. 空数组作为依赖

const [count, setCount] = useState<number>(1);
useEffect(() => {
    setTimeout(() => {
        setCount(count + 1);
    }, 1000);
    console.log(`第二个参数: 空数组, 第 ${count} 次执行`);
}, []);
// 打印log，执行一次
第二个参数: 空数组, 第 1 次执行
复制代码

现象： useEffect 会在第一次渲染后执行一次。

shuzu.png

原因： 第一次渲染后执行一次一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect中 [] 没有值，依赖没变，不触发useEffect，不执行回调函数, state 无更新，不触发组件重新渲染，至此结束。

空数组算是省略依赖关系的情况，有一定概率引起bug，比如使用空数组的useEffect中回调函数依赖一个变化的state，后续state的变化将影响不到回调函数，你可能就看不变化了。如果确定只更新一次就没问题，那么设置为空数组完全没有问题。

3. 基本类型作为依赖

const [count, setCount] = useState<number>(1);  // 基本类型以number为例
useEffect(() => {
    setTimeout(() => {
        setCount(count + 1);
    }, 1000);
    console.log(`第二个参数: 基本类型, 第 ${count} 次执行`);
}, [count]);
// 打印log，无限循环
第二个参数: 基本类型, 第 1 次执行
第二个参数: 基本类型, 第 2 次执行
第二个参数: 基本类型, 第 3 次执行
第二个参数: 基本类型, 第 ... 次执行
复制代码

现象： useEffect 会在第一次渲染以及每次更新渲染后都执行。

jiben.png

原因： 第一次渲染后执行一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect比较值（count）改变，useEffect重新执行，useEffect中回调函数改变state值，state值改变触发组件重新渲染，无限循环。

传入第二个参数，只有一个值，比较该值有变化就执行，如果有多个值的数组，会比较每一个值，有一个变化就执行

4.引用类型

4.1数组作为依赖

const [count, setCount] = useState(1);
const newArr = [4,5];
useEffect(() => {
    setTimeout(() => {
        setCount(count+1);
    }, 1000);
    console.log(`第二个参数: 数组, 第 ${count} 次执行`);
}, [newArr]);
// 打印log，无限循环
第二个参数: 数组, 第 1 次执行
第二个参数: 数组, 第 2 次执行
第二个参数: 数组, 第 3 次执行
第二个参数: 数组, 第 ... 次执行
复制代码

现象：useEffect 会在第一次渲染以及每次更新渲染后都执行。

array.png

原因：第一次渲染后执行一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect依赖项arr发生变化，此处依赖数组执行浅层比较（[...] === [...] 为false）useEffect重新执行，useEffect中回调函数改变state值，state值改变触发组件重新渲染，无限循环。

上述数组作为依赖代码，去除setTimeout会出现什么情况？

const [count, setCount] = useState(1);
const newArr = [4,5];
useEffect(() => {
    setCount(count+1);
    console.log(`第二个参数: 基本类型, 第 ${count} 次执行`);
}, [newArr]);
    
// 打印log报错，如下图
复制代码

error.png

现象： 控制台报错 “超过最大更新深度”

原因：因为useEffect频繁调用setState，state不断改变。

如何解决： 使用useRef，useRef会在每次渲染时返回同一个ref对象，返回的ref在组件的整个生命周期内保持不变。

const [count, setCount] = useState(1);
const refArr = useRef([4, 5, 6]);
useEffect(() => {
    setCount(count+1);
    console.log(`第二个参数: 数组, 第 ${count} 次执行`);
}, [refArr.current]);
// 打印log，执行一次
第二个参数: 数组, 第 1 次执行
复制代码

4.2 函数作为依赖

const [count, setCount] = useState(1);
const consoleFunction = () => {
    console.log('consoleFunction');
};
useEffect(() => {
    setTimeout(() => {
        setCount(count + 1);
    }, 1000);
    console.log(`第二个参数: 函数, 第 ${count} 次执行`);
}, [consoleFunction]);
// 打印log，无限循环
第二个参数: 函数, 第 1 次执行
第二个参数: 函数, 第 2 次执行
第二个参数: 函数, 第 3 次执行
第二个参数: 函数, 第 ... 次执行
复制代码

现象：useEffect 会在第一次渲染以及每次更新渲染后都执行。

fn.png

原因：第一次渲染后执行一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect依赖项consoleFunction函数发生变化，此处依赖函数执行浅层比较（每次渲染都重新创建一个新的函数 function(前) === function（后）为false）useEffect重新执行，useEffect中回调函数改变state值，state值改变触发组件重新渲染，无限循环。

上述函数作为依赖代码，去除setTimeout会出现什么情况？

const [count, setCount] = useState(1);
const consoleFunction = () => {
    console.log('consoleFunction');
};
useEffect(() => {
    setCount(count + 1);
    console.log("第二个参数: 函数");
}, [consoleFunction]);
// 打印log报错，如下图
复制代码

error.png

现象： 控制台报错 “超过最大更新深度”。

原因： 因为useEffect频繁调用setState，state不断改变。

如何解决： 使用useCallback，useCallback返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。

const [count, setCount] = useState(1);
const consoleFunction = useCallback(() => {
    console.log('consoleFunction');
}, []);
useEffect(() => {
    setCount(count + 1);
    console.log(`第二个参数: 函数, 第 ${count} 次执行`);
}, [consoleFunction]);
// 打印log，执行一次
第二个参数: 函数, 第 1 次执行
复制代码

4.3对象作为依赖

const [count, setCount] = useState(1);
const obj = {name: 'zhangsan'};
useEffect(() => {
    setTimeout(() => {
        setCount(count + 1);
    }, 1000);
    console.log(`第二个参数: 对象, 第 ${count} 次执行`);
}, [obj]);
// 打印log，无限循环
第二个参数: 对象, 第 1 次执行
第二个参数: 对象, 第 2 次执行
第二个参数: 对象, 第 3 次执行
第二个参数: 对象, 第 ... 次执行
复制代码

现象：useEffect 会在第一次渲染以及每次更新渲染后都执行。

obj.png

原因：第一次渲染后执行一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect依赖项obj发生变化，此处依赖对象执行浅层比较（ {...}=== {...} 为false）useEffect重新执行，useEffect中回调函数改变state值，state值改变触发组件重新渲染，无限循环。

上述对象作为依赖代码，去除setTimeout会出现什么情况？

const obj = {name: 'zhangsan'};
useEffect(() => {
    setCount(count + 1);
    console.log(`第二个参数: 对象, 第 ${count} 次执行`);
}, [obj]);
  
// 打印log报错, 如下图
复制代码

error.png

现象： 控制台报错 “超过最大更新深度”。

原因： 因为useEffect频繁调用setState，state不断改变。

如何解决： 使用useMemo，useMemo该回调函数仅在某个依赖项改变时才会更新。此处使用[]依赖，组件重新渲染后对象不再重新定义。

const [count, setCount] = useState(1);
const obj = useMemo(() => ({name: 'zhangsan'}), []);
useEffect(() => {
    setCount(count + 1);
    console.log(`第二个参数: 对象, 第 ${count} 次执行`);
}, [obj]);
// 打印log
第二个参数: 对象, 第 1 次执行
复制代码

4. 使用useEffect模拟react三个生命周期

实现componentDidMount

const Home: React.FC<Iprops> = () => {
  useEffect(() => {
    getList() // 调用方法发起异步请求
  }, [])；
  
 return (
      <div>
            hello world
      </div>
  )
}
复制代码
  • useEffect的第二个参数，传入了一个[]，表示我们只需在页面初始化时候执行副作用，此处为发起请求。
  • 相当于class组件的componentDidMount。

实现componentDidUpdate

const Home: React.FC<Iprops> =() => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    getList();  // 调用发起异步请求
  }, [count])   // 仅在count更改时更新
  return (
      <div>
            hello world
      </div>
  )
}
复制代码
  • useEffect的第二个参数，传入[count]，只有count的值发生改变，执行副作用 此处为重新发起请求。count也可换成其他依赖项。
  • 相当于class组件的componentDidUpdate。

实现componentWillUnmount

useEffect(() => {
    getList();
    return () => {
        console.log('组件注销, 实现componentWillUnmount');
    };
}, [])
复制代码
  • useEffect 第一个参数， return 一个函数，可以用来清除副作用。
  • 相当于class 组件的 componentWillUnmount。
梅花十三儿
关注
  • 25
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
widgets:一个用于学习useState，useEffect和useRef挂钩的项目
03-07
小部件应用 本申请的目的 这个应用程序用来学习React提供的一些基本的钩子。 制作这些小部件时使用的是useState，useEffect和useRef。 该项目与Stephon Grider的“ 一起作为代码完成。 如果您想了解更多有关该主题的信息
React Hook - useEffecfa函数的使用细节详解
m0_71485750的博客
10-23 1万+
Effect Hook 可以让你来完成一些类似于class中生命周期的功能;事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用(Side Effects);所以对于完成这些功能的Hook被称之为 Effect Hook;
react中的useEffect的使用
精通前端技术，了解后端接口
03-12 461
如果副作用函数内部触发了依赖项的变化，且没有正确的退出条件，那么可能会导致组件无限次地重新渲染和执行副作用函数。的回调函数可以返回一个函数，这个函数会在组件卸载或者下一次副作用执行之前被调用，用于执行一些清理操作，如取消网络请求、清除定时器等。为了避免无限循环，需要确保副作用函数内部的操作不会意外地触发依赖项的变化，或者通过适当的逻辑来中断循环。还可以接受一个可选的依赖项数组作为第二个参数，当数组中的任何值发生变化时，副作用函数会重新执行。的值发生变化时，副作用函数都会重新执行，并打印新的。
React useEffect详解
qq_41985405的博客
06-09 732
参数1：逻辑处理函数；参数2：数组或者不传。
s这是react的useEffect钩子，除了对输入使用深度比较，而不是引用相等-React开发
05-27
:whale:这是React的useEffect钩子，除了对输入使用深度比较，而不是引用相等use-deep-compare-effect:whale:这是React的useEffect钩子，除了对输入使用深度比较，而不是引用相等，警告：请仅在确实使用找不到使用React.useEffect的方法。 通常，有比深度比较更好的方法来做您想做的事情。 问题React的内置useEffect挂钩具有第二个参数，称为“依赖项数组”，它使您可以优化React将何时调用效果回调。 React会做一个比较
React--useEffect
weixin_45269534的博客
06-27 3839
useEffect
react useEffect详解
weixin_45760365的博客
04-24 2万+
useEffect详解 useEffect使用时有以下4种情况 1、不传递 useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。 useEffect(()=>{undefined console.log(props.number) setNumber(props.number) }) //所有更新都执行 2、传递空数组 useEffect(()=>
react 使用 useEffect 及踩坑
热门推荐
秋来九月八
02-25 2万+
useEffect时reactHook中最重要，最常用的hook之一。useEffect相当于react中的什么生命周期呢？这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？
【React】useEffect使用详解
weixin_50636536的博客
12-20 6118
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
timer:使用useEffect的计时器。 此代码演示了使用useEffect挂钩安装，更新和卸载组件的三个阶段
04-06
5：组件生命周期和状态（第5节） 研究组件的生命周期-安装，更新和卸载 项目：使用您的生命周期方法知识来构建时钟。 您需要在组件开始渲染时挂载它，更新它，然后使用不同的useEffect钩子将其卸载。
useEffect-codealong
03-13
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（we
projectMarch2021_2:工作卡第二个项目三月
04-23
业务需求 我们需要一个仪表板来在手机，平板电脑或台式机上显示工作清单。 我们需要清晰可见的公司徽标和名称。 职位应清晰可见。 我们希望在卡上看到挂牌的年龄。必须包括全日制或非全日制的状态，也应显示申请人需要位于的位置。 我们希望看到角色扮演所需的所有关键技能都紧密地结合在一起。 为了快速访问不同组的卡，我们想单击一项技能，并且仅显示具有该技能的卡。 如果我们单击其他技能，我们将只看到显示所有选定技能的卡 代码块思维： 我需要一些useState变量来管理数据。 我需要某种状态来保存从数据文件中提取的作业，其次是在选择可以用于过滤器功能的数组时存储技能。 Job数据需要与获取请求一起加载将获取请求包装在异步promise函数中，然后将该函数包装在useEffect钩子中，并在末尾用空的依赖项数组逗号分隔，以确保获取仅运行一次。 如果并且当站点扩展为包括数据API时，依赖项数组将包含sta
react-useeffect-example:让我们实现react的使用效果
04-11
问：让我们实现理解react的useEffect函数。 功能要求 它存储执行效果的功能和相关性数据。 允许您在渲染html元素后运行效果。 它比较依赖性数据并决定是否执行效果。 通过效果功能更改文档标题。 功能操作图 如何...
useAsyncEffect:使用useEffect的便捷功能与React中的异步功能
04-13
useAsyncEffect 使用useEffect与React中的异步功能的便捷功能。为什么方便，使代码更整洁。 允许以下import { useAsyncEffect } from "@jeswr/use-async-effect" ;function MyComponent ( ) { useAsyncEffect ( ...
react-use-effect-practice:多次使用useEffect练习使用它
05-05
React使用useEffect实践项目 该入门工具包括一个简单的项目基础，该项目带有可为孩子配置火鸡绘画作品的控件。 它包括图像（ src / components / PictureDisplay ）和消息（ src / components / Message ）的功能...
react使用hashHistory实现类似get方法带参数跳转
01-08
import { HashRouter } from 'react-router-dom'; 传参： btnClick() { hashHistory.push({ pathname: '/apartmentReserve/'+yourApartmentId, query: { name:yourApartmentname, price:yourApartmentprice }...
React【Day2】
最新发布
weixin_63681863的博客
04-17 768
useRef 组件通信 useEffect
class中怎么使用useEffect
09-06
在class中使用useEffect需要使用到React的生命周期方法。在class组件中，可以使用componentDidMount和componentDidUpdate来模拟useEffect的效果。 首先，在class组件中引入React，并继承React.Component。然后，定义一个方法作为class组件的构造函数，并在其中初始化state。接下来，在componentDidMount方法中，可以执行要在组件挂载后运行的逻辑，类似于useEffect中的effect。在componentDidUpdate方法中，可以执行要在组件更新后运行的逻辑。 下面是一个示例代码，展示了如何在class组件中使用useEffect的效果： ``` import React from 'react'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { data: null }; } componentDidMount() { // 在组件挂载后执行逻辑 console.log('Component mounted'); // 执行其他逻辑... } componentDidUpdate(prevProps, prevState) { // 在组件更新后执行逻辑 if (prevState.data !== this.state.data) { console.log('Data updated'); // 执行其他逻辑... } } render() { return ( <div> {/* 组件的渲染内容 */} </div> ); } } export default MyComponent; ``` 在上述示例中，componentDidMount方法和componentDidUpdate方法分别模拟了useEffect的挂载和更新的效果。你可以在这两个方法中执行你想要的逻辑。同时，你也可以在render方法中渲染组件的内容。 希望这个示例对你有帮助！如果还有其他问题，请随时提问。<span class="em">1</span> #### 引用[.reference_title] - *1* [terraCast:使用 Bootstrap 和 OpenWeatherAPI 使用 React 构建的天气应用程序](https://download.csdn.net/download/weixin_42135462/20715928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值