本文主要是介绍深入浅出 useEffect：React 函数组件中的副作用处理详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
useEffect 是 React 中的一个钩子函数，用于处理函数组件中的副作用操作，如发送网络请求、订阅消息、手动修改 DOM 等。下面是 useEffect 的用法总结：
- 基本用法
import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {// 在这里执行副作用操作console.log('useEffect executed');}, []); // 传入空数组，表示只在组件挂载时执行一次return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
- 处理 cleanup
在组件卸载或者依赖项变化前执行清理操作，以避免内存泄漏。
import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {// 在这里执行副作用操作console.log('useEffect executed');// 返回一个清理函数return () => {console.log('Cleanup executed');};}, []); // 传入空数组，表示只在组件挂载和卸载时执行return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
- 处理依赖项变化
当依赖项变化时，重新执行副作用操作。
import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);const [name, setName] = useState('');useEffect(() => {// 在这里执行副作用操作console.log(`Hello, ${name}! You clicked ${count} times.`);}, [count, name]); // 当 count 或 name 变化时，重新执行副作用操作return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button><input type="text" value={name} onChange={e => setName(e.target.value)} /></div>);
}
注意：
- 如果不传递第二个参数，那么每次组件重新渲染时都会执行副作用操作。
- 如果传递空数组作为第二个参数，那么只在组件挂载时执行一次副作用操作。
- 如果传递了依赖项数组，那么只有当依赖项发生变化时，才会重新执行副作用操作。
- 在清理函数中，可以访问到当前的 state 和 props，但是不能修改它们。
这篇关于深入浅出 useEffect：React 函数组件中的副作用处理详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
