8 从零到上手学习React框架教程

小节：创建和使用React组件

在React中，组件是构建用户界面的基本单位。通过创建和使用组件，我们可以将UI拆分成独立、可复用的部分，这样每个部分可以独立进行管理。

1. 组件的类型

React 主要有两种类型的组件：

• 函数组件：使用函数定义的组件。
• 类组件：使用ES6类定义的组件。

1.1 函数组件

函数组件是最常用的组件类型，语法简单，适合大多数场景。

import React from 'react';

const MyComponent = () => {
    return <h1>Hello, World!</h1>;
};

export default MyComponent;

在上面的例子中，MyComponent 是一个函数组件，它返回一个简单的 h1 元素。

1.2 类组件

类组件可以使用更复杂的功能，比如组件的生命周期方法。

import React, { Component } from 'react';

class MyClassComponent extends Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}

export default MyClassComponent;

在这个例子中，MyClassComponent 是一个类组件，它也返回一个 h1 元素，但它可以包含更多的功能。

2. 创建组件

2.1 组件的基本结构

无论是函数组件还是类组件，其基本结构都包含一个 render 方法（对于类组件）或直接返回 JSX（对于函数组件）。示例代码如下：

• 函数组件：

const Greeting = (props) => {
    return <h1>Hello, {props.name}!</h1>;
};

• 类组件：

class GreetingClass extends Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

3. 使用组件

在使用组件时，可以通过 JSX 来引入我们创建的组件。

import React from 'react';
import Greeting from './Greeting';  // 导入函数组件
import GreetingClass from './GreetingClass'; // 导入类组件

const App = () => {
    return (
        <div>
            <Greeting name="Alice" />
            <GreetingClass name="Bob" />
        </div>
    );
};

export default App;

在App组件中，我们使用了两个不同的组件 Greeting 和 GreetingClass，并通过 props 向它们传递数据。

4. 组件的状态和生命周期

在某些情况下，我们需要管理组件的状态。这通常在类组件中实现，但函数组件也可以使用 React Hooks 来处理状态。

4.1 类组件的状态

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

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

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

在这个 Counter 类组件中，我们使用 state 来保存 count，并通过按钮点击事件来增加计数。

4.2 函数组件的状态

使用 Hooks 在函数组件中管理状态：

import React, { useState } from 'react';

const CounterFunction = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

在这个示例中，我们使用 useState 来定义和更新 count 的状态。

5. 组件的样式

组件可以通过 className 属性应用CSS样式：

const StyledComponent = () => {
    return <h1 className="my-title">Styled Hello!</h1>;
};

在CSS中，我们可以定义 .my-title 的样式，从而给我们的组件添加样式。

6. 小结

通过创建和使用组件，我们可以构建复杂的用户界面。React 提供了函数组件和类组件两种选择，开发者可以根据需求选择适合的组件类型。频繁使用 props 和 state 来实现数据的流动和组件的交互是 React 开发中的重要部分。在后续的学习中，我们将深入探讨更复杂的组件之间的交互、组建生命周期以及高阶组件等内容。