如何以函数式方式使用挂钩更新我的react组件

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  // 这里的count是状态变量，setCount是更新状态的函数
  // useState(0)的参数0是状态的初始值
  // 通过解构赋值将count和setCount分别赋值给状态变量和更新状态的函数
  // useState返回一个数组，第一个元素是状态变量，第二个元素是更新状态的函数
  // 这里的useState是一个挂钩函数
  // 可以根据需要定义多个状态变量
  // 例如：const [name, setName] = useState('');
  // 这样就定义了一个名为name的状态变量和一个名为setName的更新状态的函数
  // 初始值为空字符串
  // 注意：useState只能在函数组件的顶层使用，不能在循环、条件语句或嵌套函数中使用
  // 这是因为React依赖于挂钩的调用顺序来确定状态的对应关系
  // 如果在条件语句中使用useState，可能导致状态丢失或混乱
  // 如果需要在条件语句中使用状态，可以使用useEffect挂钩来处理
  // 但这超出了本问题的范围，可以在其他问题中详细了解useEffect的使用
}

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

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