18 生命周期之使用Effect Hooks

在上一篇文章中，我们深入探讨了 React 组件的常用生命周期方法，理解了它们如何在组件的不同阶段进行状态管理和副作用处理。在这一篇中，我们将转向 Effect Hooks 的使用，这是 React 16.8 引入的重要特性之一，让我们能够以更简洁的方式管理组件的副作用。

什么是 Effect Hooks？

Effect Hooks 是通过 useEffect 钩子实现的，它使我们可以在函数组件中处理副作用，而不必使用类组件的生命周期方法。副作用的内容通常包括数据获取、DOM 操作、订阅和定时器等。

基本使用

useEffect 在我们的函数组件中可如此使用：

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

const ExampleComponent = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Clicked ${count} times`;

        // 可选的清理函数
        return () => {
            console.log('Cleanup function called');
        };
    }, [count]); // 依赖数组

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
};

export default ExampleComponent;

在这个例子中，每次 count 变化时，useEffect 内的函数会被调用。它会更改页面的 title，同时如果有任何清理需求，可以在返回的函数中实现。

依赖数组

useEffect 接受两个参数：第一个是一个函数，第二个是一个依赖数组（可选）。依赖数组用来控制副作用的执行时机：

• 如果依赖数组为空：[]，该副作用只在组件挂载和卸载时执行。
• 如果依赖数组包含某些值，副作用将仅在这些值发生变化时执行。

useEffect(() => {
    // 组件挂载时执行
    console.log('Component mounted');
    
    return () => {
        // 组件卸载时执行
        console.log('Component unmounted');
    };
}, []); // 仅在挂载和卸载时执行

多个 useEffect

我们可以在组件中使用多个 useEffect 钩子。这有助于将逻辑拆分，使代码更简洁和可读。

const ComponentWithMultipleEffects = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetchData(); // 假设此函数获取数据
    }, []);

    useEffect(() => {
        const timer = setInterval(() => {
            console.log('This will run every second');
        }, 1000);

        return () => clearInterval(timer); // 清理定时器
    }, []);

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

在这个例子中，我们有两个 useEffect。第一个用于在组件挂载时获取数据，第二个用于每秒打印消息，并在组件卸载时清理定时器。

注意事项

1. 清理副作用：确保在副作用中清理可能造成内存泄漏的问题，比如订阅、定时器等。
2. 异步操作：useEffect 本身不能返回一个 Promise，但可以在 effect 内部定义异步函数。

useEffect(() => {
    const fetchData = async () => {
        const response = await fetch('/api/data');
        const result = await response.json();
        setData(result);
    };

    fetchData(); // 调用异步操作
}, []);

在这个示例中，我们在 useEffect 内部定义并调用了一个异步函数，以获取数据。

小结

Effect Hooks 为函数组件带来了灵活性和简洁性，使得我们可以轻松管理副作用。在了解了如何使用 useEffect 之后，我们可以将它与 useState 等其他 Hooks 一起使用，自由地构建复杂的组件逻辑。在下一篇中，我们将探讨 React 中的事件处理，这将为我们实现交互逻辑开辟更广阔的视野。通过这一系列的学习，我们可以更好地掌握 React.js 带来的强大功能。