如何重写组件的一部分以响应钩子

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

function Counter() {
  // 使用useState钩子来管理计数器的状态
  const [count, setCount] = useState(0);

  // 使用useEffect钩子来处理组件挂载时的逻辑
  useEffect(() => {
    console.log('Counter component has mounted');
    // 清理函数，组件卸载时执行
    return () => {
      console.log('Counter component will unmount');
    };
  }, []); // 空依赖数组意味着这个effect只在组件挂载和卸载时运行

  // 处理按钮点击事件
  const handleClick = () => {
    setCount(count + 1);
  };

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

export default Counter;

useEffect(() => {
  // 这里的逻辑将在count变化时重新执行
}, [count]); // count是依赖项