![React 内置 Hook 之 useEffect](https://cdn.fmlg1688.cn/levenx-world/63de811c499d4d14a137b27a84f7ecd5.jpeg)
React 内置 Hook 之 useEffect
![乐闻的头像](https://cdn.portal.levenx.com/levenx-world/ghY0PdpLg5jTOhB9.jpg)
前言
Hook 是一种特殊的函数,使得你能够在不更改组件结构的条件下,重用组件之间的状态相关逻辑,进步提升我们代码的复用性和可维护性。其中,useEffect
作为核心的一部分,帮助我们解决在类组件中副作用相关逻辑复杂难懂的问题。
理解了 Hook 的概念,让我们现在深入探讨它其中一个重要的应用——useEffect
。
useEffect 是什么
useEffect
是React的核心Hook之一。它让你可以在函数组件中执行副作用操作。副作用操作可能包括数据获取、设置订阅以及手动更改 React 组件中的 DOM 等操作。
useEffect 的使用
使用 useEffect
关键是理解它的 依赖数组
这个概念。当数组中的依赖发生变化时,useEffect
的回调函数将会被执行,具体的使用方法如下:
textuseEffect(() => { // 执行你的副作用逻辑 console.log('Component has mounted or updated'); }, [ /* 这里放置你的依赖项数组 */]);
其中的依赖项数组非常关键。如果是 []
(空数组),那么这个 useEffect
仅在组件的挂载和卸载时执行;如果你想让 useEffect
在特定的props或者state改变时执行,就需要将它们列在依赖项数组中。
useEffect
清除副作用
在进行副作用操作时,你可能会创建一些需要在组件卸载前清除的资源,例如定时器、订阅等等。clear effect(清效应)的概念就应运而生:
textuseEffect(() => { const timer = setTimeout(() => { console.log('This will run after 1 second!'); }, 1000); return () => { clearTimeout(timer); console.log('Cleanup action'); }; }, []);
总结
综上所述,useEffect
是 React 钩子中不可或缺的一部分,强大而灵活。它为我们提供了在函数组件中进行复杂副作用操作的可能。希望本篇教程能帮助你更好地理解和使用 useEffect
。