React初学者指南：认识组件

在 React 的世界里，组件是核心基石，理解它对于初学者至关重要。

React 组件本质上是 JavaScript 函数或类，它们接收输入（称为 props）并返回描述屏幕上应该显示什么的 React 元素。简单来说，组件就像是构建 UI 的积木块，每个组件都负责一个特定的功能或界面部分。

组件主要分为两类：函数式组件和类组件。函数式组件是最简单的一种，它就是一个普通的 JavaScript 函数。例如：

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

这里的 Welcome 函数接收 props 参数，在这个例子中 props 有一个 name 属性，函数返回一个包含问候语的 h1 元素。函数式组件简洁明了，适合展示数据的场景。

类组件则使用 ES6 类来定义，拥有自己的状态（state）和生命周期方法。比如：

import React, { Component } from'react';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

在这个 Clock 类组件中，constructor 初始化了 state，componentDidMount 和 componentWillUnmount 是生命周期方法，tick 方法用于更新 state，render 方法返回要渲染的 UI。

组件之间可以相互组合，形成复杂的 UI 界面。一个父组件可以包含多个子组件，通过 props 传递数据给子组件。例如，有一个 App 组件作为父组件，它可以将数据传递给 Welcome 子组件：

function App() {
  return <Welcome name="John" />;
}

这种组件化的开发方式极大地提高了代码的可维护性和复用性。通过认识和掌握组件的使用，React 初学者将迈出构建强大应用程序的重要一步。