hooks 系列三：useEffect 的功能及其使用

前端

2023-09-10 09:44:16

hooks 系列三：useEffect

在学习 hooks 系列前两篇文章后，我们已经了解了 useState 和 useReducer Hook 的功能和用法。在本文中，我们将继续学习 hooks 系列中的第三个 Hook：useEffect。

useEffect 是一个非常重要的 Hook，它可以让我们在组件渲染后执行某些操作。这对于处理组件生命周期、状态管理和函数式编程等问题非常有用。

useEffect 的第一个参数要求我们传递一个函数，在 React 执行完更新后，这个函数就会被调用。这个函数可以做任何你想做的事情，比如：

设置计时器
发起网络请求
更新 DOM
调用其他函数

useEffect 的第二个参数是一个数组，用于指定哪些状态或属性的变化会触发这个函数的调用。如果数组为空，则表示这个函数只会在组件第一次渲染时调用。

下面是一个使用 useEffect Hook 来处理组件生命周期的例子：

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    console.log('组件已挂载');
    return () => {
      console.log('组件已卸载');
    };
  }, []);

  return (
    <div>
      <h1>我的组件</h1>
    </div>
  );
};

export default MyComponent;

在这个例子中，我们使用 useEffect Hook 来监听组件的生命周期。当组件挂载时，useEffect Hook 会调用第一个参数中的函数，并输出 "组件已挂载"。当组件卸载时，useEffect Hook 会调用第一个参数中的函数，并输出 "组件已卸载"。

useEffect Hook 还可以用于状态管理。例如，我们可以使用 useEffect Hook 来在状态发生变化时更新 DOM。

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

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

  useEffect(() => {
    document.title = `你点击了 ${count} 次`;
  }, [count]);

  return (
    <div>
      <h1>你点击了 {count} 次</h1>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
};

export default MyComponent;

在这个例子中，我们使用 useState Hook 来管理 count 状态。当 count 状态发生变化时，useEffect Hook 会调用第一个参数中的函数，并更新 document.title 的值。

useEffect Hook 还可以用于函数式编程。例如，我们可以使用 useEffect Hook 来在组件卸载时取消计时器。

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

const MyComponent = () => {
  const timerRef = useRef();

  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器正在运行');
    }, 1000);

    timerRef.current = timer;

    return () => {
      clearInterval(timerRef.current);
    };
  }, []);

  return (
    <div>
      <h1>定时器正在运行</h1>
      <button onClick={() => clearInterval(timerRef.current)}>停止定时器</button>
    </div>
  );
};

export default MyComponent;