您好,登录后才能下订单哦!
这篇文章主要讲解了“react中如何使用useEffect”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react中如何使用useEffect”吧!
useEffect时reactHook中最重要,最常用的hook之一。
useEffect相当于react中的什么生命周期呢?
这个问题在react官网中有过介绍,在使用的过程中,容易被忽略,在面试的时候却经常被问及,(面试造航母,上班拧螺丝?),开个玩笑这个问题并不难回答,下面是react官方的原话:
如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
componentDidMount
组件挂载
componentDidUpdate
组件更新
componentWillUnmount
组件将要摧毁
useEffect需要传递两个参数,第一个参数是逻辑处理函数,第二个参数是一个数组
用法
useEffect(() => { /** 执行逻辑 */ },[])
重要理解
一、第二个参数存放变量,当数组存放变量发生改变时,第一个参数,逻辑处理函数将会被执行
二、第二个参数可以不传,不会报错,但浏览器会无线循环执行逻辑处理函数。
useEffect(() => { /** 执行逻辑 */ })
三、第二个参数如果只传一个空数组,逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ,不就是相当于 componentDidMount
useEffect(() => { /** 执行逻辑 */ },[])
四、第二个参数如果不为空数组,如下
const [a, setA] = useState(1); const [b, setB] = useState(2); useEffect(() => { /** 执行逻辑 */ },[a,b])
逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和 componentDidUpdate 的结合
五、useEffect第一个参数可以返回一个回调函数,这个回调函数将会在组件被摧毁之前和再一次触发更新时,将之前的副作用清除掉。这就相当于componentWillUnmount。
useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅(计时器,或者递归循环)。在组件被摧毁之前,或者依赖数组的元素更新后,应该将这些订阅也给摧毁掉。
比如以下的情况(没有去除计时器,增大不必要的开销和代码风险)
const [time, setTime] = useState(0) useEffect(() => { const InterVal = setInterval(() => { setTime(time + 1) },1000) },[])
利用第五点,在组件被摧毁前去除计时器。
const [time, setTime] = useState(0) useEffect(() => { const InterVal = setInterval(() => { setTime(time + 1) },1000) return () => { clearInterval(InterVal ) } },[])
1、useEffect执行函数被循环执行。
出现这种情况可能有两种原因。
没传第二个参数
useEffect(() => { /** 执行逻辑 */ })
2、你在useEffect执行函数里面改变了useEffect监测的变量
const [a, setA] = useState(1); useEffect(() => { /** 执行逻辑 */ setA(a + 1) },[a])
解决的方法 不要在useEffect第一参数执行函数中去改变第二参数依赖元素的地址的值。当依赖元素的地址的值发生改变,又会执行一次执行函数,这不是无限循环么。
3、useEffect监测不到依赖数组元素的变化。
只有一种可能,依赖数组元素的地址的值根本就没变,比如:
const [a, setA] = useState({ b: 'dx', c: '18', }) const changeA = () => { setA((old) => { old.b = 'yx' return old }) } useEffect(() => { /** 当组件挂载时执行一次changeA */ changeA () },[]) /**当changeA执行却没有打印 a*/ useEffect(() => { /** 执行逻辑 */ console.log(a) },[a])
是因为changeA没有真正的改变a在栈中的值(地址的值),只是改变了a在堆中的值。
useEffect监测不到堆中值得变化,所有引用类型数据都应该注意这一点。
解决的办法:
const [a, setA] = useState({ b: 'dx', c: '18', }) const changeA = () => { setA((old) => { const newA = {...old} newA .b = 'yx' return newA }) } useEffect(() => { /** 当组件挂载时执行一次changeA */ changeA () },[]) /**当changeA执行打印 {b:'yx',c:'18'} */ useEffect(() => { /** 执行逻辑 */ console.log(a) },[a])
获取数据案例:
import React, { useState, useEffect } from 'react'; import axios from 'axios'; function App() { const [data, setData] = useState({ hits: [] }); useEffect(() => { const fetchData = async () => { const result = await axios( 'https://hn.algolia.com/api/v1/search?query=redux', ); setData(result.data); }; fetchData(); }, []); return ( <ul> {data.hits.map(item => ( <li key={item.objectID}> <a href={item.url}>{item.title}</a> </li> ))} </ul> ); } export default App;
上面例子中,useState()用来生成一个状态变量(data),保存获取的数据;useEffect()的副效应函数内部有一个 async 函数,用来从服务器异步获取数据。拿到数据以后,再用setData()触发组件的重新渲染。
由于获取数据只需要执行一次,所以上例的useEffect()的第二个参数为一个空数组
附线上运行代码
有时候,我们不希望useEffect()每次渲染都执行,这时可以使用它的第二个参数,使用一个数组指定副效应函数的依赖项,只有依赖项发生变化,才会重新渲染。
function Welcome(props) { useEffect(() => { document.title = `Hello, ${props.name}`; }, [props.name]); return <h2>Hello, {props.name}</h2>; }
上面例子中,useEffect()的第二个参数是一个数组,指定了第一个参数(副效应函数)的依赖项(props.name)。只有该变量发生变化时,副效应函数才会执行。如果第二个参数是一个空数组,就表明副效应参数没有任何依赖项。
因此,副效应函数这时只会在组件加载进入 DOM 后执行一次,后面组件重新渲染,就不会再次执行。这很合理,由于副效应不依赖任何变量,所以那些变量无论怎么变,副效应函数的执行结果都不会改变,所以运行一次就够了。
副效应是随着组件加载而发生的,那么组件卸载时,可能需要清理这些副效应。
useEffect()允许返回一个函数,在组件卸载时,执行该函数,清理副效应。如果不需要清理副效应,useEffect()就不用返回任何值。
useEffect(() => { const subscription = props.source.subscribe(); return () => { subscription.unsubscribe(); }; }, [props.source]);
上面例子中,useEffect()在组件加载时订阅了一个事件,并且返回一个清理函数,在组件卸载时取消订阅。
实际使用中,由于副效应函数默认是每次渲染都会执行,所以清理函数不仅会在组件卸载时执行一次,每次副效应函数重新执行之前,也会执行一次,用来清理上一次渲染的副效应。
使用useEffect()时,有一点需要注意。如果有多个副效应,应该调用多个useEffect(),而不应该合并写在一起。
错误写法:
function App() { const [varA, setVarA] = useState(0); const [varB, setVarB] = useState(0); useEffect(() => { const timeoutA = setTimeout(() => setVarA(varA + 1), 1000); const timeoutB = setTimeout(() => setVarB(varB + 2), 2000); return () => { clearTimeout(timeoutA); clearTimeout(timeoutB); }; }, [varA, varB]); return <span>{varA}, {varB}</span>; }
上面的例子是错误的写法,副效应函数里面有两个定时器,它们之间并没有关系,其实是两个不相关的副效应,不应该写在一起。正确的写法是将它们分开写成两个useEffect()。
正确写法:
function App() { const [varA, setVarA] = useState(0); const [varB, setVarB] = useState(0); useEffect(() => { const timeout = setTimeout(() => setVarA(varA + 1), 1000); return () => clearTimeout(timeout); }, [varA]); useEffect(() => { const timeout = setTimeout(() => setVarB(varB + 2), 2000); return () => clearTimeout(timeout); }, [varB]); return <span>{varA}, {varB}</span>; }
感谢各位的阅读,以上就是“react中如何使用useEffect”的内容了,经过本文的学习后,相信大家对react中如何使用useEffect这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。