react class组件和function组件混用

在React中，可以混合使用Class组件和Function组件。通常情况下，Class组件用于较复杂的逻辑和状态管理，而Function组件则用于简单和无状态的展示层组件。

下面是一个示例，展示了如何在同一个父组件中混合使用Class组件和Function组件：

import React, { Component } from 'react';

// Class组件
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <div>
        <h2>计数器</h2>
        <p>当前计数：{this.state.count}</p>
        <button onClick={this.incrementCount}>增加</button>
      </div>
    );
  }
}

// Function组件
const Greeting = () => {
  return (
    <div>
      <h2>欢迎信息</h2>
      <p>欢迎来到React混合组件示例！</p>
    </div>
  );
}

// 父组件
const App = () => {
  return (
    <div>
      <Greeting />
      <Counter />
    </div>
  );
}

export default App;

在上述代码中，我们定义了一个Class组件`Counter`和一个Function组件`Greeting`。`Counter`组件有一个计数器状态，并且有一个增加计数的方法。`Greeting`组件只负责展示欢迎信息。

在父组件`App`中，我们将`Greeting`组件和`Counter`组件一起渲染。这样，我们就实现了Class组件和Function组件的混合使用。

请注意，在React 16.8版本之后，引入了Hooks API，使得Function组件也可以具有状态和生命周期的特性，因此在新的React项目中，建议优先使用Function组件和Hooks。但是，仍然可以在需要的情况下使用Class组件。