React 组件

在 React 中，组件是构建用户界面的基本单元。React 应用程序通常由多个组件组成，每个组件负责一部分界面的渲染和交互逻辑。组件可以是函数组件或类组件。

函数组件

函数组件是一种定义 React 组件的简单方式，它是一个 JavaScript 函数，接收一个 props 对象作为参数，并返回一个 React 元素（通常是通过 JSX 语法返回）。

import React from 'react';
function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

在上面的例子中，MyComponent 是一个简单的函数组件，它接收一个 name 属性并显示一个问候消息。

类组件

类组件是使用 ES6 class 语法定义的React组件，它扩展自 React.Component 类，并且具有自己的状态（state）和生命周期方法。

import React, { Component } from 'react';
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

在上面的例子中，MyComponent 是一个类组件，它包含了一个状态 count 和一个按钮，点击按钮会增加计数器的值。

使用组件

无论是函数组件还是类组件，都可以像HTML标签一样在其他组件或JSX中使用：

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  return (
    <div>
      <h1>My Test App</h1>
      <MyComponent name="testComponent" />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

在这个例子中，App 组件中包含了一个 MyComponent 的实例，通过name属性向其传递数据。

总结

React 的组件系统使得构建复杂的用户界面变得简单和模块化。组件可以通过 props 进行数据传递，通过 state 管理内部状态，并且可以通过生命周期方法来处理组件的各个阶段。