【React Hooks 学习笔记】useEffect

简介: 前端西瓜哥

大家好,我是前端西瓜哥。

今天继续讲 React Hooks 中 useEffect 的用法。

useEffect 用于实现副作用,在这里你将会脱离声明式,写命令式的代码。准确来说,写的是与通过声明式控制 DOM 数无关的代码。

执行的时机是在组件完成渲染之后,进行下一轮渲染之前。

如果你熟悉类组件,你可以将 useEffect 当作是 componentDidMount(组件挂载)、componentDidUpdate(组件更新) 和 componentWillUnmount(组件销毁) 这三个生命周期函数的组合体。

每次渲染后都执行

useEffect 默认情况(不提供第二个参数)下会在每次的组件被重新渲染后,执行传入的回调方法。

useEffect(() => {
 console.log('组件被渲染');
});

这种写法,无论在组件初次挂载时,还是之后的更新都会被触发,这和类组件的 componentDidUpdate 有点区别。

如果你想实现 componentDidUpdate 的效果,你得写个自定义 hook 或使用一些开源方案,比如 ahooks 的 useUpdateEffect。

只在第一次渲染时执行

useEffect 除了支持每次渲染都执行,还可以做更细粒度的控制:只在第一次渲染时,也就是组件挂载的时候执行一次回调函数。

写法为:

useEffect(() => {
 console.log('组件被挂载');
},[]);

可以看到,我们这里提供了第二个参数,一个依赖项数组。

React 会比较将要执行的渲染和上次渲染的每个对应的依赖项是否不同。如果全都相同,就不会执行回调函数;如果有一个不同,则会执行。不过第一次渲染时,并没有上次渲染,所以一定会被执行。

传一个空数组,其实意思就是:我的依赖项永远不会变,你执行完第一次就不要再执行了。

因此可以实现类组件中 componentDidMount 的效果。

依赖项设置为空数组是比较特殊的用法,专用于挂载事件。其实更常见的写法如下:

useEffect(() => {
  document.title = '当前计数值:' + count;
}, [count]);

我们希望在 count 发生改变时,才执行回调函数。如果你还懂 Vue,其实这就像是 watch() 监听函数一样,监听着 count 这个变量的变化,非常好用的机制属于是。

但依赖项数组有局限性:只会做是否相同的比较,且多个依赖项是逻辑或的关系。如果你的比较逻辑比较复杂,还得自己写一个判断条件。

组件销毁时执行

当我们希望组件销毁时,执行一个函数,又该如何写呢?

这个 useEffect 也支持,useEffect 会将传入的回调函数执行后的返回的函数保存起来,在组件销毁时或进行下一次渲染前执行。

useEffect(() => {
  return () => {
    console.log('组件销毁');
  }
}, []);

这个函数是否会执行,也和依赖项数组有关。

如果依赖项没有变化,组件重新渲染也不会执行它。但如果是整个组件被销毁了,这个函数一定会被执行。

这里的 return 是不能随便返回的。在函数中我习惯在 if 条件中通过 return 来结束分支,来减少 if 的嵌套,但这在 useEffect 里就要慎用了,可能一不小心以为提前返回,将 undefined 取代了一个本该返回的销毁函数。

useEffect 之所以会用回调函数返回的函数这种看似奇怪的写法,是为了通过闭包,让返回的函数能够拿到需要的变量,常见的用途有事件响应函数的绑定和取消,如:

useEffect(() => {
  const handler = () => {
    console.log('鼠标按下');
  }
  window.addEventListener('mousedown', handler);
  return () => {
    window.removeEventListener('mousedown', handler);
  }
}, []);

返回的函数需要 handler 来取消事件绑定,闭包的方式才能让它拿到。

结尾

useEffect 很有魔性,只要一个 API,它就能实现:

  • 组件挂载钩子
  • 组件更新钩子
  • 组件销毁钩子
  • 监听状态值的变化

看起来像是违背了单一职责原则,但其实你可以把 useEffect 当作比普通组件粒度更小的一个 “小组件”,一个新的小世界,这为我们做更小粒度的功能解耦提供了新的解决方案,但却不失优雅。

相关文章
|
5天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
3天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
3天前
|
前端开发 JavaScript 开发者
掌握React中的useEffect:函数组件中的魔法钩子
掌握React中的useEffect:函数组件中的魔法钩子
|
3天前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
5天前
|
缓存 前端开发
Web开发:深入探讨React Hooks的使用和最佳实践
Web开发:深入探讨React Hooks的使用和最佳实践
10 0
|
5天前
|
存储 前端开发 JavaScript
React Hooks实战:从useState到useContext深度解析
React Hooks 深度解析:useState用于函数组件的状态管理,通过初始化和更新状态实现渲染控制;useContext则提供跨组件数据传递。useState的状态更新是异步的,不支持浅比较,可结合useEffect处理副作用。useContext在多层组件间共享状态,但可能导致不必要的渲染。两者结合可创建复杂应用场景,如带主题切换的计数器。了解其工作原理和优化策略,能有效提升React应用性能。
20 0
|
5天前
|
前端开发 JavaScript
react中的useEffect的使用
react中的useEffect的使用
14 2
|
5天前
|
前端开发 API 开发者
React Hooks API:自定义Hooks的创建与使用
【4月更文挑战第25天】本文介绍了React自定义Hooks的创建与使用。自定义Hooks是提升React开发效率的关键工具。
|
5天前
|
前端开发
探索React Hooks:一种全新的组件逻辑管理方式
React Hooks是React 16.8版本引入的一项新功能,它改变了我们编写React组件的方式。本文将从Hooks的起源讲起,逐步分析Hooks的优势,并通过具体示例展示Hooks在组件逻辑管理中的应用,旨在帮助读者更好地理解和运用React Hooks。
|
5天前
|
前端开发 JavaScript
使用React Hooks实现简单的计数器应用
使用React Hooks实现简单的计数器应用

热门文章

最新文章