useEffect()如何使用

useEffect()是React Hooks提供的一个函数，用于在函数组件中处理副作用。

使用useEffect()需要传入两个参数，第一个参数是一个回调函数，第二个参数是一个依赖数组。

回调函数是用来执行副作用的，比如访问API、更新DOM等。它会在组件渲染后执行，也会在组件更新后执行，除非你指定了依赖项。

依赖数组是用来告诉React什么情况下需要重新执行回调函数。如果依赖数组为空，那么回调函数只会在组件挂载和卸载时执行。如果依赖数组有值，那么当这些值发生变化时，React会重新执行回调函数。

举个例子：

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

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

  useEffect(() => {
    console.log('Component mounted or updated');
    return () => {
      console.log('Component unmounted');
    };
  }, [count]);

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

export default App;

在这个例子中，我们使用了useState()来创建一个状态变量count，并在组件中渲染它。我们还使用了useEffect()来打印一些日志，以便我们可以看到何时会执行回调函数。我们在依赖数组中传入了count，这意味着当count发生变化时，React会重新执行回调函数。

当我们点击按钮时，count会增加，组件会重新渲染，useEffect()也会重新执行。当我们卸载组件时，useEffect()也会执行清理函数，并打印"Component unmounted"。