React组件与模块（一）

React组件和模块是在React应用中用于组织和封装代码的重要概念。组件是具有特定功能和状态的可重用代码单元，而模块是用于组织和管理组件的文件单元。

React组件

概念

React组件是用于构建用户界面的独立和可重用的代码单元。每个React组件都封装了特定的功能和状态，并可以作为一个独立的单位进行开发、测试和维护。组件可以包含其他组件、处理用户交互、渲染数据等。

类组件

React中最常见的组件类型是类组件（Class Components）。类组件是继承自React.Component类的JavaScript类，它们使用render方法来定义组件的结构和内容，并可以通过state属性来管理组件的状态。

以下是一个简单的类组件示例：

import React from 'react';

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

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}

在上面的示例中，我们创建了一个名为MyComponent的类组件，它包含了一个计数器和一个按钮。state属性用于存储组件的状态，handleClick方法用于更新状态并重新渲染组件。通过render方法，我们定义了组件的结构和内容。

函数组件

除了类组件，React还支持函数组件（Function Components）。函数组件是纯粹的JavaScript函数，接收props作为参数，并返回要渲染的内容。

以下是一个简单的函数组件示例：

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <p>Hello, {props.name}!</p>
    </div>
  );
}

在上面的示例中，我们创建了一个名为MyComponent的函数组件，它接收一个props参数，并根据传入的name属性显示不同的问候消息。