跳到主要内容

第4章：组件基础

4.1 引言：React组件的概念与分类​

React组件是React应用的基本构建模块。它是独立且可复用的代码片段，能够接收输入数据（props）并返回 JSX 元素树。组件可以是函数组件（Function Component）或类组件（Class Component），两者各有特点，适用于不同的场景。

组件的分类：

  • 函数组件：使用函数定义，代码简洁，是React推荐的主要组件形式。
  • 类组件：使用 ES6 类定义，适用于需要复杂生命周期逻辑或状态管理的场景。

理解组件的概念及其分类是构建React应用的基础。

4.2 关键知识点​

4.2.1 函数组件与类组件的定义​

1. 函数组件（Function Component）​

函数组件是最简单的组件形式，通过函数返回 JSX 代码。其本质是一个 JavaScript 函数。

示例：

function Greeting() {
  return <div>Hello, React!</div>;
}

2. 类组件（Class Component）​

类组件使用 ES6 类定义，通常适用于需要复杂逻辑或生命周期管理的场景。

示例：

class Greeting extends React.Component {
  render() {
    return <div>Hello, React!</div>;
  }
}

小结：
函数组件简洁直观，类组件功能强大。在 React 16.8 之后，函数组件新增了 Hooks 机制，使其功能更加全面，逐渐成为主流选择。

4.2.2 组件的 props 与 state​

1. props（属性）​

props 是组件间传递数据的方式，具有以下特点：

  • 只读性：props 是只读的，不能在组件内部修改。
  • 传递方向：从父组件向子组件传递。

示例：

// 父组件传递 props
<HelloMessage name="React" />

// 子组件接收 props
function HelloMessage(props) {
  return <div>Hello, {props.name}</div>;
}

2. state（状态）​

state 是组件内部管理数据的方式，具有以下特点：

  • 可变性：state 可以被组件内部修改。
  • 组件本地化：state 只属于组件本身，不会传递给其他组件。

示例（函数组件）：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

示例（类组件）：

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

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

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

小结：
props 和 state 是 React 组件的两个核心概念。props 用于组件间的数据传递，state 用于管理组件的内部状态。

4.2.3 组件的基本生命周期​

React 组件在其生命周期中会经历以下几个阶段：

1. 类组件的生命周期（以类组件为例）​

  • Mounting（挂载）：
    • constructor()：组件初始化。
    • render()：首次渲染。
    • componentDidMount()：组件挂载完成后调用。
  • Updating（更新）：
    • render()：当 props 或 state 变化时调用。
    • componentDidUpdate()：更新完成后调用。
  • Unmounting（卸载）：
    • componentWillUnmount()：组件卸载前调用。

2. 函数组件的生命周期（通过 Hooks 实现）​

React 16.8 引入 Hooks，允许函数组件使用生命周期逻辑。

  • useEffect()：替代类组件的 componentDidMount、componentDidUpdate 和 componentWillUnmount。

示例：

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 组件挂载时执行
    console.log('Component mounted');
    
    // 组件更新时执行
    return () => {
      console.log('Component updated');
    };
  }, []);

  return <div>Hello</div>;
}

小结：
组件的生命周期是 React 的重要概念，帮助我们在特定阶段执行逻辑，如数据获取、订阅管理等。

4.3 实践示例：组件与状态管理​

让我们创建一个简单的组件，演示 props 和 state 的使用。

// 父组件
function ParentComponent() {
  const name = 'React';
  return (
    <div>
      <h1>Welcome to React Components</h1>
      <ChildComponent greet={name} />
    </div>
  );
}

// 子组件
function ChildComponent(props) {
  const [clickCount, setClickCount] = useState(0);

  const handleClick = () => {
    setClickCount(clickCount + 1);
  };

  return (
    <div>
      <p>Hello, {props.greet}!</p>
      <p>Click count: {clickCount}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

示例说明：

  • ParentComponent 向 ChildComponent 传递 greet prop。
  • ChildComponent 通过 useState 管理 clickCount 状态。
  • 点击按钮时，clickCount 会递增。

4.4 总结​

  • React 组件分为函数组件和类组件两种形式。
  • props 是组件间的数据传递方式，而 state 用于管理组件的内部状态。
  • 组件的生命周期帮助我们在特定阶段执行逻辑，函数组件通过 Hooks 实现生命周期管理。

4.5 小结​

通过本章的学习，我们掌握了 React 组件的基本概念和使用方法。建议读者通过以下方式巩固知识：

  1. 搭建一个简单的 React 项目，实践组件的创建和通信。
  2. 尝试使用 Hooks 实现组件的生命周期逻辑。
  3. 阅读 React 官方文档，深入理解 props 和 state 的最佳实践。

下一章我们将学习 React 的组件通信方式，包括父子组件之间的数据传递和状态提升策略。

继续学习：第5章