react中useEffect Hook作用小结
作者：yqcoder
`useEffect`是一个用于处理副作用（Side Effects）的 Hook
一、处理副作用
1. 副作用的概念
副作用是指在组件渲染过程中执行的、会影响组件外部环境或具有外部可见影响的操作。
常见的副作用包括数据获取（如从服务器获取数据）、订阅外部数据源（如消息队列、事件总线）、手动操作 DOM（如修改页面标题、滚动位置）以及设置定时器等。
2. useEffect 基本用法
2.1 语法结构
`useEffect`接受两个参数，第一个参数是一个函数，称为副作用函数（Effect Function），在这个函数内部执行实际的副作用操作。第二个参数是一个可选的依赖项数组（Dependency Array）。
import React, { useEffect, useState } from "react";
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
// 这是一个副作用函数，这里模拟从服务器获取数据
console.log("Fetching data...");
return () => {
// 可选的清理函数，用于在组件卸载或依赖项变化时清理副作用
console.log("Cleaning up...");
};
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default MyComponent;在这个例子中，副作用函数在组件挂载时执行，因为依赖项数组为空（`[]`），表示这个副作用只在组件初始化时触发一次。副作用函数还返回了一个清理函数，用于在组件卸载或依赖项变化时执行清理操作。
二、模拟生命周期方法
1. 替代 componentDidMount
在类组件中，`componentDidMount`方法在组件挂载到 DOM 后立即执行。在函数组件中，可以使用`useEffect`来实现类似的功能。当`useEffect`的依赖项数组为空时，副作用函数在组件第一次渲染（挂载）后执行，相当于`componentDidMount`。
import React, { useEffect, useState } from "react";
const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
// 模拟在组件挂载后获取数据，相当于componentDidMount
fetch("https://example.com/api/data")
.then((response) => response.json())
.then((jsonData) => setData(jsonData));
}, []);
return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
};
export default MyComponent;2. 替代 componentDidUpdate
在类组件中，`componentDidUpdate`方法在组件每次更新（`state`或`props`变化）后执行。在函数组件中，可以通过在`useEffect`的依赖项数组中指定依赖项来模拟`componentDidUpdate`。当依赖项发生变化时，副作用函数会重新执行，类似于`componentDidUpdate`。
import React, { useEffect, useState } from "react";
const MyComponent = () => {
const [count, setCount] = useState(0);
const [data, setData] = useState(null);
useEffect(() => {
// 当count变化时，重新获取数据，类似于componentDidUpdate
if (count > 0) {
fetch("https://example.com/api/data")
.then((response) => response.json())
.then((jsonData) => setData(jsonData));
}
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
{data ? <p>{data}</p> : <p>Loading...</p>}
</div>
);
};
export default MyComponent;3. 替代 componentWillUnmount
在类组件中，`componentWillUnmount`方法在组件卸载前执行，用于清理资源。在函数组件中，`useEffect`的副作用函数返回的清理函数在组件卸载或依赖项变化时执行，从而替代了`componentWillUnmount`的功能。
import React, { useEffect, useState } from "react";
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => {
// 组件卸载或依赖项变化时清除定时器，相当于componentWillUnmount
clearInterval(timer);
};
}, []);
return (
<div>
<p>Count: {count}</p>
</div>
);
};
export default MyComponent;三、依赖项管理和优化
1. 依赖项的作用
1.1 决定副作用执行时机
例如：如果一个副作用函数依赖于组件的某个状态值，将这个状态值放入依赖项数组中，那么当这个状态值改变时，副作用函数就会重新运行。这样可以确保副作用与组件的状态和属性保持同步。
2. 优化性能
例如：在不必要的时候重复获取数据或重新订阅事件，浪费资源并可能导致应用程序性能下降。
3. 优化策略和常见错误
3.1 空依赖项数组的优化与风险
例如：初始化数据获取或设置全局事件监听器。但如果在副作用函数中使用了组件的状态或属性，并且没有将它们包含在依赖项数组中，就会导致闭包问题。
import React, { useEffect, useState } from "react";
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
// 错误：没有将count包含在依赖项数组中，导致闭包问题
console.log("Count:", count);
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default MyComponent;3.2 正确指定依赖项
为了避免上述问题，需要将副作用函数中使用的所有组件的状态、属性以及其他外部函数（如果在副作用函数内部调用）都包含在依赖项数组中。
import React, { useEffect, useState } from "react";
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Count:", count);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default MyComponent;到此这篇关于react中useEffect Hook作用小结的文章就介绍到这了,更多相关react useEffect Hook内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！