React useEffect的使用场景_react的usememo
useEffect 是 React 中最常用的 Hook 之一，它允许你在函数组件中执行副作用操作（side effects）。这些副作用操作包括数据获取、订阅、手动操作 DOM、设置定时器等。useEffect 的设计是为了让你能够在组件渲染后执行这些操作，并且在组件卸载或重新渲染时进行清理。
1.基本用法
useEffect 的基本语法如下：
useEffect(() => {
// 这里执行操作
return () => {
// 这里执行清理操作（可选）
};
}, [dependencies]);
- 第一个参数：是一个函数，表示要执行的操作。
- 第二个参数：是一个数组，表示依赖项（可选）。当依赖项发生变化时，useEffect 会重新执行。
2.使用场景
以下是 useEffect 的几种常见使用场景：
2.1数据获取（Fetching Data）
在组件挂载后，你可以使用 useEffect 来从 API 获取数据。
import React, { useState, useEffect } from 'react';
function DataFetching() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Error fetching data:', error));
}, []); // 空数组表示只在组件挂载时执行
return (
{data ? {JSON.stringify(data, null, 2)} : 'Loading...'}
);
}
export default DataFetching;
2.2订阅事件或监听事件（Subscriptions/Event Listeners）
你可以使用 useEffect 来订阅某个事件（如窗口大小变化、键盘事件等），并在组件卸载时取消订阅。
import React, { useState, useEffect } from 'react';
function WindowSize() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []); // 空数组表示只在组件挂载和卸载时执行
return Window width: {width}px;
}
export default WindowSize;
2.3手动操作 DOM（Direct DOM Manipulation）
在某些情况下，你可能需要手动操作 DOM 元素，useEffect 可以帮助你完成这个操作。
import React, { useEffect, useRef } from 'react';
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []); // 空数组表示只在组件挂载时执行
return ;
}
export default FocusInput;
2.4设置定时器或延时操作（Timers/Intervals）
你可以使用 useEffect 来设置定时器或延时操作，并在组件卸载时清除定时器。
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []); // 空数组表示只在组件挂载和卸载时执行
return Seconds: {seconds};
}
export default Timer;
2.5依赖项变化时执行（Dependency Array）
useEffect 的第二个参数是一个依赖项数组，当依赖项发生变化时，useEffect 会重新执行。
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count has changed to: ${count}`);
}, [count]); // 当 count 变化时执行
return (
Count: {count}
);
}
export default Counter;
2.6清理操作（Cleanup）
在 useEffect 中，你可以返回一个清理函数，用于在组件卸载或重新渲染时执行清理操作。
import React, { useEffect } from 'react';
function CleanupExample() {
useEffect(() => {
console.log('Component mounted');
return () => {
console.log('Component unmounted');
};
}, []); // 空数组表示只在组件挂载和卸载时执行
return Cleanup Example;
}
export default CleanupExample;
3.注意事项
- 避免无限循环：如果你在 useEffect 中更新状态，并且没有正确设置依赖项，可能会导致无限循环。例如：
useEffect(() => {
setCount(count + 1);
}, [count]); // 这里会导致无限循环
- 依赖项数组：如果你省略了依赖项数组（即不传递第二个参数），useEffect 会在每次渲染后执行。这可能会导致性能问题。
useEffect(() => {
console.log('This will run on every render');
}); // 没有依赖项数组
- 清理函数：如果你在 useEffect 中设置了订阅、事件监听器或定时器，务必要返回一个清理函数，以避免内存泄漏。
4.总结
useEffect 是一个非常强大的 Hook，它允许你在函数组件中执行各种副作用操作。通过合理使用依赖项数组和清理函数，你可以确保副作用操作只在必要时执行，并且在组件卸载时进行清理。希望这些使用场景和示例能帮助你更好地理解和应用 useEffect。