useEffect 钩子的目的是什么?

在 React 中，组件的生命周期可以用钩子函数来描述，与函数组件相比，类组件可以使用多个生命周期方法，如 componentDidMount 或 componentWillUnmount。

但是在函数组件中，没有直接的钩子函数来进行类似的操作。这就是为什么 useEffect 钩子应运而生的原因。

什么是 useEffect 钩子？

useEffect 钩子是 React 中常用的一个钩子函数。它使得函数组件能够在创建和销毁时处理副作用。副作用指的是网络请求，访问 DOM 元素，设置订阅和手动修改 React 组件中的状态等操作。

由于函数组件不能直接访问 React 的生命周期方法，因此 useEffect 钩子成为了解决这个问题的最佳方式。

运用 useEffect 钩子

基本用法

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

function Example() {
  // 声明一个新的状态变量，我们称之为 "count"
  const [count, setCount] = useState(0)

  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

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

在这个例子中，我们使用了 useEffect 钩子来监听 count 变量。每次 count 发生变化时，都会调用 useEffect 钩子。在这个例子中，我们更新了页面标题，以 You clicked ${count} times 的形式显示点击的次数。

副作用的清除

有时候，我们需要清除副作用。例如，当组件销毁时我们希望取消订阅：

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 取消订阅
    subscription.unsubscribe();
  };
});

在这个例子中，我们使用 useEffect 钩子订阅了 props.source，并返回一个函数，在组件销毁时调用该函数来取消订阅。

总结

useEffect 钩子是 React 提供的用于操作副作用的函数式钩子。它让函数组件拥有了类组件所具有的能力，使得函数组件能够在创建和销毁时处理副作用。如果你需要在函数组件中进行网络请求、访问 DOM 元素、设置订阅和手动修改 React 组件中的状态等操作，那么 useEffect 钩子将是一种很好的解决方案。