// 类组件
class ClassGreeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>; // 依赖 this 访问 props
  }
}

// 函数组件
const FunctionGreeting = (props) => {
  return <h1>Hello, {props.name}</h1>; // 直接访问 props 参数，无 this
};

// 类组件：状态管理
class ClassCounter extends React.Component {
  // 状态初始化
  state = { count: 0, name: "计数器" };

  // 状态更新（自动合并顶层属性）
  increment = () => {
    this.setState({ count: this.state.count + 1 }); // 普通更新
    // 函数式更新（依赖当前状态，更安全）
    // this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>{this.state.name}：{this.state.count}</p>
        <button onClick={this.increment}>+1</button>
      </div>
    );
  }
}

// 函数组件：状态管理
import { useState } from 'react';

const FunctionCounter = () => {
  // 状态初始化（支持惰性初始化：useState(() => 0)）
  const [count, setCount] = useState(0);
  const [name, setName] = useState("计数器");

  const increment = () => {
    setCount(count + 1); // 普通更新
    // 函数式更新（推荐，依赖当前状态时更准确）
    // setCount(prevCount => prevCount + 1);
  };

  // 对象类型状态：需手动合并（替换式更新）
  const [user, setUser] = useState({ name: "张三", age: 18 });
  const updateAge = () => {
    setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 }));
  };

  return (
    <div>
      <p>{name}：{count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
};

// 类组件：生命周期处理
class ClassLifecycle extends React.Component {
  state = { data: [] };

  // 挂载阶段：发起网络请求、初始化定时器
  componentDidMount() {
    this.fetchData();
    this.timer = setInterval(() => console.log("定时器执行"), 1000);
  }

  // 更新阶段：props 变化时重新请求数据
  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.fetchData();
    }
  }

  // 卸载阶段：清理副作用（清除定时器、取消请求）
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  fetchData = () => {
    fetch(`https://api.example.com/data/${this.props.id}`)
      .then(res => res.json())
      .then(data => this.setState({ data }));
  };

  render() {
    return <div>{this.state.data.map(item => item.name)}</div>;
  }
}

// 函数组件：useEffect 模拟生命周期
import { useState, useEffect } from 'react';

const FunctionLifecycle = (props) => {
  const [data, setData] = useState([]);

  // 聚合：挂载 + 更新 + 卸载逻辑
  useEffect(() => {
    // 模拟 componentDidMount + componentDidUpdate
    const fetchData = async () => {
      const res = await fetch(`https://api.example.com/data/${props.id}`);
      const result = await res.json();
      setData(result);
    };
    fetchData();

    // 模拟 componentWillUnmount（清理函数）
    const timer = setInterval(() => console.log("定时器执行"), 1000);
    return () => {
      clearInterval(timer);
    };
  }, [props.id]); // 依赖 props.id，仅当 id 变化时执行

  return <div>{data.map(item => item.name)}</div>;
};

// 类组件：事件处理（需处理 this 绑定）
class ClassEvent extends React.Component {
  // 方案1：箭头函数（推荐，无需手动绑定）
  handleClick = () => {
    console.log("点击事件", this.props.name); // this 指向组件实例
  };

  // 方案2：构造函数 bind 绑定
  // constructor(props) {
  //   super(props);
  //   this.handleClick = this.handleClick.bind(this);
  // }
  // handleClick() {
  //   console.log("点击事件", this.props.name);
  // }

  render() {
    return <button onClick={this.handleClick}>类组件按钮</button>;
  }
}

// 函数组件：事件处理（无需 this 绑定）
const FunctionEvent = (props) => {
  // 直接定义函数，无需处理 this
  const handleClick = () => {
    console.log("点击事件", props.name);
  };

  return <button onClick={handleClick}>函数组件按钮</button>;
};

// 类组件：性能优化
class ClassOptimize extends React.PureComponent {
  // 若不使用 PureComponent，可手动编写 shouldComponentUpdate
  // shouldComponentUpdate(nextProps, nextState) {
  //   return nextProps.name !== this.props.name; // 仅 name 变化时更新
  // }

  // 复杂计算：需手动缓存，否则每次 render 重复执行
  getExpensiveValue = () => {
    return this.props.list.filter(item => item > 0).sort((a, b) => a - b);
  };

  render() {
    const sortedList = this.getExpensiveValue();
    return <div>{sortedList.join(',')}</div>;
  }
}

// 函数组件：性能优化
import { useState, memo, useMemo, useCallback } from 'react';

// 组件级缓存：React.memo
const FunctionOptimize = memo((props) => {
  // 计算结果缓存：useMemo，仅 list 变化时重新计算
  const sortedList = useMemo(() => {
    return props.list.filter(item => item > 0).sort((a, b) => a - b);
  }, [props.list]);

  // 函数引用缓存：useCallback，仅依赖变化时更新函数引用
  const handleClick = useCallback(() => {
    console.log("点击", props.name);
  }, [props.name]);

  return (
    <div>
      <div>{sortedList.join(',')}</div>
      <button onClick={handleClick}>按钮</button>
    </div>
  );
});

// 类组件：高阶组件实现逻辑复用（定时器逻辑）
function withTimer(WrappedComponent) {
  return class extends React.Component {
    state = { time: 0 };
    timer = null;

    componentDidMount() {
      this.timer = setInterval(() => {
        this.setState(prevState => ({ time: prevState.time + 1 }));
      }, 1000);
    }

    componentWillUnmount() {
      clearInterval(this.timer);
    }

    render() {
      return <WrappedComponent {...this.props} time={this.state.time} />;
    }
  };
}

// 使用高阶组件
class ClassTimer extends React.Component {
  render() {
    return <div>计时：{this.props.time} 秒</div>;
  }
}
const ClassTimerWithHOC = withTimer(ClassTimer);

// 函数组件：自定义 Hooks 实现逻辑复用（定时器逻辑）
import { useState, useEffect } from 'react';

// 自定义 Hook：复用定时器逻辑
function useTimer(initialTime = 0) {
  const [time, setTime] = useState(initialTime);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return time;
}

// 使用自定义 Hook
const FunctionTimer = () => {
  const time = useTimer(0); // 直接调用 Hook，复用逻辑
  return <div>计时：{time} 秒</div>;
};