Effect Hook_前端培训

发布时间:2021年05月18日作者:atguigu浏览次数:487

Effect Hook

        所谓的 “Effect” 对应的概念叫做 “side effect”。指的是状态改变时,相关的远端数据异步请求、事件绑定、改变 DOM 等;因为此类操作要么会引发其他组件的变化,要么在渲染周期中并不能立刻完成,所以就称其为“副作用”。

       传统做法中,一般在 componentDidMount、componentDidUpdate、componentWillUnmount 等生命周期中分别管理这些副作用,逻辑分散而复杂。

       在 Hook 中的方案是使用 useEffect  方法,这相当于告诉 React 在每次更新变化到 DOM 后,就调用这些副作用;React 将在每次(包括首次)render()  后执行这些逻辑。

同样看一个示例:

Effect Hook_前端培训

可以看出:

useEffect  一般可以搭配 useState  使用

useEffect  接受一个函数作为首个参数,在里面书写副作用代码,比如绑定事件

若该函数返回一个函数,则返回的这个函数就作为相应副作用的 “cleanup”,比如解绑事件

同样可以用多个 useEffect  分组不同的副作用,使逻辑更清晰;而非像原来一样都方针同一个生命周期中

跳过副作用以优化性能

        副作用往往都带来一些性能消耗,传统上我们可能这样避免不必要的执行:

        componentDidUpdate(prevProps, prevState) {  if (prevState.count !== this.state.count) {    document.title = `You clicked ${this.state.count} times`;  }}

        useEffect  中的做法则是传入第二个可选参数:一个数组;数组中的变量用来告诉 React,在重新渲染过程中,只有在其变化时,对应的副作用才应该被执行。

        useEffect(() => {  document.title = `You clicked ${count} times`;}, [count]);

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习。


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦3层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)