请你详细说一下 useEffect和useState使用

当使用React编写函数组件时，`useEffect`和`useState`是两个常用的钩子函数，用于处理状态和副作用。

`useState`用于在函数组件中创建和更新状态。它接受一个初始值作为参数，并返回一个数组，其中第一个元素是当前状态的值，第二个元素是更新状态的函数。例如：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在上面的例子中，我们使用`useState`创建了一个名为`count`的状态变量，并初始化为0。`setCount`函数用于更新`count`的值。

`useEffect`用于处理副作用，例如订阅事件、进行网络请求等。它接受两个参数：一个回调函数和一个可选的依赖项数组。回调函数定义了需要执行的副作用逻辑，依赖项数组用于指定什么情况下触发副作用。如果依赖项数组为空，副作用只会在组件初次渲染和销毁时执行。

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 在组件渲染时执行副作用逻辑
    console.log('Component rendered');

    // 在组件销毁时清除副作用
    return () => {
      console.log('Component unmounted');
    };
  }, []);

  return <div>Example Component</div>;
}

在上面的例子中，我们使用`useEffect`创建了一个副作用，即在组件渲染时打印一条消息，并在组件销毁时打印另一条消息。由于依赖项数组为空，副作用只会在组件初次渲染时执行。

总结一下，`useState`用于创建和更新状态，而`useEffect`用于处理副作用。它们让我们能够在函数组件中管理状态和处理生命周期。