ReactJS - 使用useEffect：初学者的全面指南

你好，未来的React法师们！今天，我们将踏上一段激动人心的旅程，探索React中的useEffect。如果你是编程新手，不用担心——我会成为你的友好向导，我们会一步步来。在本教程结束时，你将能够像专业人士一样使用useEffect！

ReactJS - Using useEffect

useEffect是什么？

在我们深入之前，让我们先了解一下useEffect的相关知识。想象一下你正在烤蛋糕。你混合了食材，放入烤箱，然后呢？你可能会想设置一个计时器，对吧？这就是useEffect在React中起到的作用。它允许你在组件中执行“副作用”。

副作用是伴随着组件渲染UI的主要工作发生的动作。这些可能包括：

从API获取数据
手动更改DOM
设置订阅

现在，让我们来深入了解！

useEffect的签名

useEffect钩子有特定的书写方式。让我们分解一下：

useEffect(() => {
// 你的副作用代码在这里
}, [dependencies]);

以下每个部分的意义：

useEffect：我们正在使用的钩子的名称。
() => { ... }：这是一个箭头函数，我们在其中放置副作用代码。
[dependencies]：这是一个可选数组，我们列出我们的副作用依赖于的任何值。

让我们看一个简单的例子：

import React, { useEffect, useState } from 'react';

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);

return () => clearInterval(interval);
}, []);

return <div>秒数：{seconds}</div>;
}

在这个例子中，我们创建了一个简单的计时器。useEffect钩子设置了一个间隔，每秒增加我们的seconds状态。空依赖数组[]意味着这个副作用只会在组件挂载时运行一次。

Effect钩子的特性

现在我们已经看到了一个基本示例，让我们探索一下副作用钩子的关键特性：

时间：默认情况下，副作用在每次渲染后运行。
条件执行：我们可以通过使用依赖数组来控制副作用何时运行。
清理：副作用可以返回一个清理函数来防止内存泄漏。

让我们详细看看每一个。

时间

默认情况下，useEffect在每次渲染后运行。这意味着如果你在副作用中更新状态，它可能会导致无限循环！以下是一个不应该做的例子：

function BadExample() {
const [count, setCount] = useState(0);

useEffect(() => {
setCount(count + 1); // 这将导致无限循环！
});

return <div>{count}</div>;
}

条件执行

为了防止不必要的副作用运行，我们可以提供一个依赖数组：

function ConditionalEffect({ userId }) {
const [user, setUser] = useState(null);

useEffect(() => {
fetchUser(userId).then(data => setUser(data));
}, [userId]);

return <div>{user ? user.name : '加载中...'}</div>;
}

在这个例子中，副作用只会在userId改变时运行。

清理

有些副作用需要清理以防止内存泄漏。以下是如何进行的：

function CleanupExample() {
useEffect(() => {
const subscription = subscribeToSomething();

return () => {
subscription.unsubscribe();
};
}, []);

return <div>我已订阅！</div>;
}

从副作用返回的函数将在组件卸载时调用。

使用Effect获取数据

useEffect的一个常见用途是从API获取数据。让我们看一个例子：

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

if (loading) return <div>加载中...</div>;
if (error) return <div>错误：{error.message}</div>;
return <div>数据：{JSON.stringify(data)}</div>;
}

这个组件在挂载时获取数据，处理加载和错误状态，并在数据准备好后显示。

DOM变更

useEffect也可以用于直接操作DOM。以下是一个例子：

function DOMManipulator() {
useEffect(() => {
const element = document.getElementById('my-element');
element.style.color = 'red';

return () => {
element.style.color = '';
};
}, []);

return <div id="my-element">我是红色的！</div>;
}

这个副作用在组件挂载时将元素颜色改为红色，并在组件卸载时重置。

清理函数

我们已经接触过清理函数，但让我们更深入一些。清理函数对于防止内存泄漏和不需要的行为至关重要。以下是一个更复杂的例子：

function WindowResizer() {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return <div>窗口宽度：{windowWidth}px</div>;
}

在这个例子中，我们在组件挂载时添加了一个事件监听器，并在组件卸载时移除它。这防止了监听器在我们不再需要它时仍然存在。

总结

让我们总结一下我们所学的关于useEffect的内容：

特性	描述
签名	`useEffect(() => { ... }, [dependencies])`
时间	默认情况下在每次渲染后运行
条件执行	使用依赖数组来控制副作用何时运行
清理	从副作用返回一个函数用于清理
数据获取	可以用于从API获取数据
DOM操作	可以直接操作DOM
清理函数	对于防止内存泄漏至关重要

就这样！你已经迈出了探索useEffect世界的第一步。记住，像任何强大的工具一样，它需要练习才能掌握。所以不要害怕实验和犯错误——这是我们所有人学习的方式。快乐编码，愿你的副作用总是干净，你的组件总是响应式的！

Credits: Image by storyset

上一教程:

ReactJS - 使用useState

下一教程:

ReactJS - 使用useContext