useEffect的示例

useEffect是React中的一个Hook，用于处理组件的副作用操作。副作用操作包括数据获取、订阅事件、手动修改DOM等。下面是一个useEffect的示例：

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

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

  useEffect(() => {
    // 在组件渲染后执行副作用操作
    document.title = `点击了 ${count} 次`;
    
    // 清除副作用操作
    return () => {
      document.title = 'React App';
    };
  }, [count]); // 仅在count发生变化时执行副作用操作

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

在上面的示例中，我们使用了useState来定义了一个状态变量count和一个修改count的函数setCount。在组件渲染后，useEffect会执行副作用操作，将当前的count值显示在页面标题上。当count发生变化时，useEffect会重新执行副作用操作。同时，我们还使用了return语句来清除副作用操作。