当前位置: 首页> 教育> 锐评 > 深圳中装建设公司_移动互联网开发期末考试_郑州聚商网络科技有限公司_网推怎么做

深圳中装建设公司_移动互联网开发期末考试_郑州聚商网络科技有限公司_网推怎么做

时间:2025/7/10 9:09:30来源:https://blog.csdn.net/weixin_39593730/article/details/144686040 浏览次数:1次
深圳中装建设公司_移动互联网开发期末考试_郑州聚商网络科技有限公司_网推怎么做

1、概述

useEffectReact中一个用于 将组件与外部系统同步的 Hook;在函数式组件中处理副作用函数的 Hook,用于替代类式组件中的生命周期函数
可以在副作用函数中 实现以下操作:
a、请求接口,获取后台提供数据
b、操作DOM
c、事件监听window.addEventListener()
d、清理任务; clearInterval()

如果没有与外部系统链接,或许可以不使用 useEffect

2、写法

useEffect(fnc, dependencies)

第一个参数fnc 是一个副作用函数,即在执行的过程中会影响组件的其他属性,而不是纯函数,纯函数是没有参数,输入相同的时候,输出也是相同的;
第二个参数可选参数:dependencies 是副作用函数执行的依赖项数组,可以是空数组,a/当为空数组时候,组件只会在初次渲染的时候,触发副作用函数执行;b/当不传依赖项时候,每次组件渲染都会触发副作用函数执行;c/依赖项可以是 props、state

当:fnc 中 return () => {} 时,这里执行的是组件卸载时候的逻辑;

2.1、依赖项不传

每次渲染都会触发副作用函数, 类似于类式组件中的 componentDidUpdate 钩子

useEffect(() => {console.log('==视图更新了=')
})
2.2、依赖项传入空数组

只有在第一次挂载时候才会触发副作用函数,类似于类式组件componentDidMount 钩子

useEffect(() => {console.log('=只有挂载=更新了=')
}, [])
2.3、依赖指定属性时

当属性 name 变化时候,就会触发副作用函数,类似于类式组件中的 componentDidUpdate 钩子

const [name, setName] = useState('Andy')
useEffect(() => {console.log('=只有name 属性变化时=更新了=')
},[name])
2.4、副作用函数中传入 回调函数时

此时,类似于 类式组件componentWillUnmount 钩子
可以在这里清除定时任务,销毁DOM结构、移除事件监听

useEffect(() => {return () => {console.log('====组件将要卸载了=')}
}, [name])
2.5、清除定时任务
import { useEffect, useState } from 'react'
export default function index() {const [count, setCount] = useState(0)const [name, setName] = useState('Andy')const handleChangeName = () => {setName(`${name} + &`)}let timer = nullconst handleChangeTime = () => {console.log('==开始计数了=')timer = setInterval(() => {setCount((count) => count + 1)}, 500)}useEffect(() => {return () => {// 清除定时任务clearInterval(timer)console.log('==计数结束了=')}}, [name])
return (<div><h3>useEffect text demo .</h3><p>名称:{name}</p><button onClick={handleChangeName}>清除定时任务</button><hr /><p>计数器:{count}</p><button onClick={handleChangeTime}>计时开始</button></div>)
}
2.6、清除事件监听
useEffect(() => {// 组件挂载 监听视图窗口变化const resize = () => console.log('窗口大小变化');window.addEventListener('resize', resize);return() => {window.removeEventListener('resize', resize)}
}, [])
2.7、死循环

禁止useEffect 中使用 useState 的SetXxx 函数, 更新useEffect 中的依赖项
否则会导致进入死循环

 useEffect(() => {// 死循环const timer = setInterval(() => {console.log('==计数进行中=', count, count)setCount(count + 1)}, 500)return () => {clearInterval(timer)console.log('==计数结束了=')}
},[count, name])

3、注意事项:

1、依赖项为引用类型时,React 会对比前后地址(引用指针)是否一致,如果一致 Effect 则不会重新渲染
2、避免使用更新依赖时产生死循环
3、组件中使用的定时任务,需要在组件卸载时候清除,避免导致内存溢出
4、依赖项避免过多,会导致追踪复杂化,或者出现意向不到的问题,尽量简化依赖项;

4、useEffectuseMemo 的区域

useMemo 主要用于计算和缓存值,以减少重复昂贵的计算,它返回一个 memoized 值。
useEffect 主要用于处理副作用,例如订阅、数据获取、DOM 操作等,它不返回值,但可以在组件渲染后执行操作。
useMemo 的作用是优化性能,减少不必要的计算,即使没有useMemo 组件同样可以正常执行
useEffect 的目标是处理副作用,管理组件的生命周期
useMemo 的依赖数组用于控制何时重新计算值
useEffect 的依赖数组用于控制何时运行副作用函数

关键字:深圳中装建设公司_移动互联网开发期末考试_郑州聚商网络科技有限公司_网推怎么做

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: