在React中管理组件功能的正确方法

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      showContent: true
    };
  }

  componentDidMount() {
    // 组件挂载后执行的操作
    console.log('Component mounted');
  }

  componentDidUpdate(prevProps, prevState) {
    // 组件更新后执行的操作
    console.log('Component updated');
  }

  componentWillUnmount() {
    // 组件卸载前执行的操作
    console.log('Component unmounted');
  }

  handleClick() {
    // 更新状态的方法
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    const { count, showContent } = this.state;
    return (
      <div>
        <button onClick={() => this.handleClick()}>Click me</button>
        <p>Count: {count}</p>
        {showContent && <p>Some content</p>}
      </div>
    );
  }
}

export default MyComponent;