useEffect
useEffect 是 React 中的一个 Hook,用于在函数组件中进行副作用操作(如数据获取、订阅、事件监听等)。
语法:
useEffect(effect, dependencies)
使用 useEffect 的步骤如下:
- 在函数组件中调用 useEffect,并传入一个回调函数作为 effect。这个回调函数将会在组件渲染完成后执行。
- 可选地,传入一个依赖项数组作为第二个参数。依赖项数组表示什么情况下需要重新运行 effect。如果不传入依赖项数组,则 effect 每次组件重新渲染时都会执行;如果传入一个空数组
[]
,则 effect 只会在组件挂载和卸载时执行;如果传入依赖项数组,effect 将会在依赖项发生变化时执行。
使用场景:
数据获取、订阅、事件监听等
demo
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
// 在组件渲染完成后执行的副作用操作
fetchData();
}, []);
const fetchData = async () => {
// 异步获取数据的逻辑
const response = await fetch('https://api.example.com/data');
const json = await response.json();
setData(json);
};
return <div>{data ? <div>Data loaded</div> : <div>Loading...</div>}</div>;
}
可以看到,在上述代码中,我们在组件渲染完成后调用 useEffect,并传入一个空的依赖项数组
[]
。这意味着 fetchData 函数只会在组件第一次渲染时执行一次。这样可以避免重复获取数据。当依赖项数组中的值发生变化时,useEffect 将会重新运行。