使用React Hooks模拟类组件的生命周期方法

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理逻辑（可选）
  };
}, [依赖项]);

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('组件已挂载');
    // 执行初始化操作，例如数据获取
  }, []); // 空数组确保只在挂载时执行一次

  return <div>示例组件</div>;
}

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

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

  useEffect(() => {
    console.log('count 或 someProp 发生了变化');
    // 执行更新后的操作
  }, [count, someProp]); // 仅在 count 或 someProp 变化时执行

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 设置订阅或事件监听器
    const handleResize = () => {
      console.log('窗口大小发生变化');
    };
    window.addEventListener('resize', handleResize);

    // 返回清理函数
    return () => {
      console.log('组件将卸载，清理副作用');
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空数组确保仅在挂载和卸载时执行

  return <div>示例组件</div>;
}

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

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('React');

  useEffect(() => {
    console.log('count 发生了变化');
  }, [count]);

  useEffect(() => {
    console.log('name 发生了变化');
  }, [name]);

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <p>名称：{name}</p>
      <button onClick={() => setName('Hooks')}>更改名称</button>
    </div>
  );
}