在 React 中，组件是应用的核心构建块之一。以下是几种 React 组件的常见写法：
1. 函数组件（Function Component）
函数组件是一种简单的定义 React 组件的方式，它接受一个 props 对象并返回一个 React 元素。函数组件只是一个 JavaScript 函数，没有自己的状态或方法，通常用于呈现不需要复杂逻辑的 UI 组件。
```jsx
function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}
```
2. 类组件（Class Component）
类组件是使用 ES6 类语法定义的 React 组件，继承自 React.Component 类。类组件具有自己的状态和生命周期方法，并且可以通过 props 来接收父组件传递的数据。通常用于实现较为复杂的业务逻辑。
```jsx
class MyComponent extends React.Component {
  constructor(props) {react with
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ count: unt + 1 });
  }
  render() {
    return (
      <div>
        <p>You clicked {unt} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}
```
3. 高阶组件（Higher-Order Component）
高阶组件是一种函数，接受一个组件作为参数并返回一个新的组件。它可以用来修改组件的行为或增强组件的功能。常见的用途包括：复用组件逻辑、包装组件以提供共享的功能，例如授权、日志记录等。
```jsx
function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}
const MyComponentWithLogger = withLogger(MyComponent);
```
4. Hooks 组件
Hooks 是 React 16.8 引入的新特性，它使函数组件可以具有状态和生命周期等特性。使用 Hooks 可以在不编写类组件的情况下实现更复杂的逻辑。常用的 Hooks 包括 useState、useEffect、useContext 等。
```jsx
import { useState, useEffect } from 'react';
function MyComponent(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
```
以上是几种 React 组件的常见写法，根据项目需求选择合适的方式来定义组件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。