请列举定义react组件的方法？

在 React 里，定义组件的方法有几种常见方式，可以按 函数式组件 / 类组件 两大类来划分：

函数组件（Function Component）

React 现在推荐的方式，写法简洁，支持 Hooks。

// 最基础
function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 箭头函数写法
const Hello = (props) => <h1>Hello, {props.name}</h1>;

// 带 hooks
const Counter = () => {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
};

特点：

• 无需继承 React.Component，更轻量。

• 搭配 useState、useEffect 等 Hooks 实现状态和生命周期逻辑。

类组件（Class Component）

React 16 之前常用，现在逐渐被函数组件取代。

import React from "react";

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

  componentDidMount() {
    console.log("组件挂载");
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +
        </button>
      </div>
    );
  }
}

特点：

• 必须继承 React.Component 或 React.PureComponent。

• 生命周期方法（componentDidMount、componentWillUnmount 等）。

• 通过 this.state 管理状态，this.setState 更新。

高阶组件（HOC）

本质是一个函数，接收一个组件，返回一个增强后的组件。

function withLogger(WrappedComponent) {
  return function Enhanced(props) {
    console.log("Props:", props);
    return <WrappedComponent {...props} />;
  };
}

const HelloWithLogger = withLogger(Hello);

Render Props 模式

通过函数作为子组件传递，来共享逻辑。

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (e) => {
    this.setState({ x: e.clientX, y: e.clientY });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.children(this.state)}
      </div>
    );
  }
}

// 使用
<MouseTracker>
  {({ x, y }) => <h1>Mouse position: {x}, {y}</h1>}
</MouseTracker>;

其它方式

• React.createClass（旧的写法，已废弃）

• 直接调用 React.createElement（很少手写）

总结：

• 函数组件（推荐，用 Hooks 管理逻辑）。

• 类组件（老项目或特殊场景还在用）。

• HOC / Render Props（逻辑复用模式）。