当前位置：首页 > news >正文

react useEffect用法

news 2025/7/9 4:16:23

useEffect 是 React Hooks 中的一个非常强大的 Hook，它允许你在函数组件中执行副作用操作（side effects），如数据获取、订阅或手动更改 DOM。useEffect 使得函数组件可以执行类似于类组件中的生命周期方法的操作，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

`useEffect` 的基本用法

useEffect 接受两个参数：一个是回调函数，另一个是一个依赖数组（可选）。

1. 回调函数

这个回调函数会在渲染之后执行，可以用来执行副作用操作。

2. 依赖数组

这是一个可选的数组，用于告诉 React 哪些值会影响到副作用函数的执行。如果依赖数组为空 ([])，则副作用函数只会在组件挂载时执行一次，并在组件卸载时执行清理操作。如果依赖数组包含值，则副作用函数将在依赖项更新时重新执行。

`useEffect` 的常见用法

1. 组件挂载时执行一次（类似于 `componentDidMount`）

如果依赖数组为空 ([])，useEffect 回调将在组件挂载时执行一次，并在组件卸载时执行清理操作。

import React, { useState, useEffect } from 'react';function Example() {useEffect(() => {console.log('Component mounted');// 清理操作（类似于 componentWillUnmount）return () => {console.log('Component unmounted');};}, []);return (<div>Hello World!</div>);
}

2. 组件更新时执行（类似于 `componentDidUpdate`）

如果依赖数组包含值，则 useEffect 回调将在依赖项更新时重新执行。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {console.log(`Count updated to ${count}`);// 清理操作return () => {console.log('Cleanup on count change');};}, [count]);  // 注意依赖数组中的 countreturn (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

3. 组件卸载时执行清理操作

即使没有依赖数组，useEffect 也可以在组件卸载时执行清理操作。

import React, { useState, useEffect } from 'react';function Example() {useEffect(() => {const subscription = someObservable.subscribe(msg => console.log(msg));// 清理操作return () => {subscription.unsubscribe();};}, []);return (<div>Hello World!</div>);
}

4. 组件挂载和更新时执行（类似于 `componentDidMount` 和 `componentDidUpdate`）

如果需要在组件挂载时执行一次，并且在依赖项更新时也执行，可以结合使用空依赖数组和依赖数组。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {console.log('Component mounted or count changed');// 清理操作return () => {console.log('Cleanup on count change or unmount');};}, [count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

注意事项

清理操作：在 useEffect 的回调函数中返回一个函数，这个函数将在组件卸载时执行，或者在依赖项发生变化时执行。这是执行清理操作的地方，比如取消网络请求、移除事件监听器等。
依赖数组：确保依赖数组中的值是正确的。如果依赖数组中有值发生了变化，副作用函数将会重新执行。如果依赖数组为空，副作用函数只会在组件挂载时执行一次，并在组件卸载时执行清理操作。
性能优化：如果依赖数组包含复杂的对象或数组，可以使用 useMemo 或 useCallback 来避免不必要的重新渲染。