介绍

useEffect是React的一个Hook，用于处理组件的生命周期函数，在组件挂载、更新或卸载时执行副作用操作。副作用操作可能包括发送网络请求、访问本地存储、注册或注销事件监听器、或者手动触发重渲染等等。

用法

使用useEffect需要引入React和useState或其他相关的Hook：

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

useEffect接受两个参数，第一个参数是一个函数，用于执行副作用操作；第二个参数是一个数组，用于指定触发副作用操作的依赖项。

useEffect(() => {
  // 执行副作用操作
}, [dep1, dep2, ...]);

如果没有传递第二个参数，那么useEffect会在组件每次更新时都执行。

如果传递的是一个空数组，即[]，那么useEffect只会在组件首次挂载时执行，相当于componentDidMount。

如果传递的是一个数组，那么当数组中的依赖项发生变化时，useEffect会重新执行，相当于componentDidUpdate。这个数组可以包含原始类型的值、状态、甚至是函数，只要它们是引用类型的，就必须通过[]的方式传递。

对于函数组件而言，《React Hooks》中规定，useEffect应该只执行副作用操作，不能返回任何值。

示例

以一个计数器组件为例子，来展示useEffect的使用：

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>click me</button>
      <p>Count: {count}</p>
    </div>
  );
}

这个计数器组件中，每次点击按钮都会增加计数器的值，同时触发useEffect。useEffect中的函数会将当前计数器的值设置为document.title这个DOM元素的文本内容。useEffect的第二个参数[count]表示只有当计数器改变时才触发副作用操作。

总结

useEffect是React提供的用于处理组件生命周期函数的Hook，用于执行组件副作用操作。它可以根据需要在不同的时机注册或移除一些业务处理逻辑。由于它是基于函数式组件实现的，所以使用起来非常方便、简洁。不过需要注意，副作用操作一定要清除干净，否则可能会造成一些潜在的问题，比如内存泄漏等。