React 的 useEffect
钩子函数的作用是:
- 处理副作用:在函数组件中,无法使用类似于生命周期方法的方式来处理副作用,如设置 timer、发送网络请求、更新 DOM 等。
useEffect
提供了一种方式来处理这些副作用。 - 模拟生命周期方法:
useEffect
可以模拟类组件的生命周期方法,如 componentDidMount
、componentDidUpdate
、componentWillUnmount
等。 - ** cleanup**:
useEffect
返回一个函数,用于清理副作用,这可以防止内存泄露。
useEffect
的常见用法包括:
- 获取数据:在组件挂载时获取数据,例如从 API 获取数据。
- 设置 timer:在组件挂载时设置 timer,例如每隔一段时间执行某个任务。
- 更新 DOM:在组件挂载时更新 DOM,例如设置焦点或滚动到某个位置。
- 监听事件:在组件挂载时监听事件,例如监听窗口 resize 事件。
useEffect
的基本语法是:
import { useState, useEffect } from 'eact';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// 在组件挂载时执行
console.log('组件挂载');
// 返回一个函数,用于清理副作用
return () => {
console.log('组件卸载');
};
}, [count]); // 依赖项
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
在上面的示例中,useEffect
会在组件挂载时执行,并返回一个函数,用于清理副作用。在依赖项数组中,我们指定了 count
状态变量,当 count
变化时,useEffect
会重新执行。
以下是一个使用 useEffect
获取图片资源的示例:
import React, { useState, useEffect } from 'react';
function ImageComponent() {
const [image, setImage] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
const fetchImage = async () => {
setLoading(true);
try {
const response = await fetch('https://example.com/image.jpg');
const blob = await response.blob();
const url = URL.createObjectURL(blob);
setImage(url);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
fetchImage();
}, []);
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return <img src={image} alt='Image' />;
}
在上面的示例中,我们使用 useState
创建了三个状态变量:
image
: 存储获取的图片资源的 URLloading
: 存储是否正在加载图片的状态error
: 存储获取图片时出现的错误
然后,我们使用 useEffect
获取图片资源。在 useEffect
回调函数中,我们使用 fetch
API 获取图片资源,并将其转换为 blob 对象。然后,我们使用 URL.createObjectURL
方法将 blob 对象转换为 URL,并将其设置为 image
状态变量。
在 useEffect
回调函数中,我们还使用 try
-catch
语句来捕获获取图片时出现的错误,并将其设置为 error
状态变量。
最后,我们使用条件语句来渲染不同的内容:
- 如果正在加载图片,则渲染 “Loading…” 文本
- 如果获取图片时出现错误,则渲染错误信息
- 如果获取图片成功,则渲染图片
注意,在上面的示例中,我们使用了空数组 []
作为 useEffect
的依赖项,这意味着 useEffect
只会在组件挂载时执行一次。如果你需要在组件更新时重新获取图片资源,可以将依赖项设置为某个状态变量,例如 [props.id]
。