React-Hooks----useEffect()

前言

useEffect() 是 React 中最常用的 Hook 之一，它可以让函数组件拥有类似于类组件中 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期函数的功能。

用法

useEffect() 接受两个参数
第一个参数是一个函数，称为 Effect 函数，该函数定义了在组件渲染完成后需要执行的操作。
第二个参数是一个数组，包含了该 Effect 函数所依赖的数据，当这些数据发生变化时，Effect 函数将重新执行，如果指定的是[], 回调函数只会在第一次render()后执行，相当于componentDidMount

Effect 函数可以返回一个清除函数，用于在组件卸载时清除 Effect 函数产生的一些副作用,相当于componentWillUnmount

以下是一个使用 useEffect() 的示例代码：

import { useEffect, useState } from 'react';function MyComponent() {const [count, setCount] = useState(0);useEffect(() => {console.log(`You clicked ${count} times.`);return () => {console.log('Component unmounted.');}}, [count]);return (<div><p>You clicked {count} times.</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

在上面的示例代码中，当组件初次渲染完成或 count 发生变化时，useEffect() 函数将被调用，并且输出当前的点击次数。在组件卸载时，清除函数将被调用，并且输出组件已经卸载。