理解基于类的组件以重写为功能组件

import React from 'react';

class CounterClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

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

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

export default CounterClass;

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval); // Cleanup function
  }, []); // Empty dependency array means this effect runs once on mount

  return <div>Count: {count}</div>;
}

export default CounterFunctional;