深入理解React中的useEffect钩子函数

引言： React是一种流行的JavaScript库，它通过组件化和声明式编程的方式简化了前端开发。在React中，一个核心概念是组件的生命周期，其中包含了许多钩子函数，用于管理组件的不同阶段。其中之一就是useEffect钩子函数，它为我们提供了在组件渲染周期中处理副作用的能力。本篇博客将深入探讨useEffect的基本用法、常见应用场景以及注意事项。

什么是useEffect？

在React中，useEffect是一个内置的钩子函数，可以在函数式组件中执行副作用操作。副作用操作通常包括数据获取、订阅事件、手动操作DOM等与组件渲染无关的操作。useEffect在每次组件渲染后都会执行，但你也可以通过传递第二个参数来控制它的触发条件

useEffect的3中使用方法，（三个生命周期）

1.只执行一次（挂载阶段）

useEffect(() => {

//在这里可以写一些逻辑

},[]）

上述代码中，在 useEffect 中传入一个空数组 [] 作为依赖项，表示它只在组件挂载时执行一次，并在卸载时执行清理操作。

2.根据数据的变化而执行（更新阶段）

cosnt [data,setData] = userstate();

useEffect(() => {

//在这里可以写一些逻辑

},[data]）

上述代码中，在 useEffect 中传入一个空数组 [data] 作为依赖项，表示data只要发生改变就执行。

3.一直执行（持续阶段）

useEffect(() => {

//在这里可以写一些逻辑

}）

上述代码中，在 useEffect 中没有任何依赖项，表示data会一直执行。无限执行。