7 React 的组件化思想

React 是一个用于构建用户界面的 JavaScript 库，其核心思想是“组件化”。这一思想使得开发者能够将复杂的 UI 拆分成更小、更可管理的部分，每个部分称为一个 组件。在这一小节中，我们将深入探讨组件化的概念、优势以及如何创建组件。

1. 组件的定义

在 React 中，组件 是一个 JavaScript 函数或类，接受 props（属性）并返回一个 React 元素（描述应该在屏幕上呈现的内容）。组件可以是以下几种形式：

• 函数组件：一个简单的 JavaScript 函数。
• 类组件：一个继承自 React.Component 的 ES6 类。

示例：函数组件

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

示例：类组件

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

2. 组件的类型

2.1 单个组件

一个单独的组件只负责渲染界面的一部分。在实际的应用中，从简单的按钮到复杂的表格都是单个组件的表现。

2.2 组合组件

多个组件可以组合在一起，形成更复杂的 UI 结构。父组件可以通过 props 将数据传递给子组件。

示例：组合组件

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

在这个例子中，App 是一个父组件，它组合了两个 Greeting 子组件。

3. 组件的状态（State）

组件除了可以接收外部数据（通过 props），还可以有内部状态（state），用于存储与该组件相关的数据。状态改变时，组件会重新渲染。

示例：使用状态的组件

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>
    );
  }
}

在这个示例中，Counter 组件有一个状态 count，并提供一个按钮来增加计数。每当按钮被点击时，组件会更新状态并重新渲染。

4. 组件的生命周期

每个 React 组件都有一系列的生命周期事件，从组件的创建到更新，以及销毁。在类组件中，可以通过生命周期方法来管理这些阶段。

常见的生命周期方法

• componentDidMount：组件挂载后调用。
• componentDidUpdate：组件更新后调用。
• componentWillUnmount：组件卸载前调用。

示例：生命周期方法

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

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

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

  render() {
    return <p>Seconds: {this.state.seconds}</p>;
  }
}

在这个示例中，Timer 组件每秒更新一次计时器。componentDidMount 用于启动定时器，而 componentWillUnmount 用于清理定时器。

5. 组件的自定义和复用

组件化带来的另一个好处是能够复用组件。我们可以创建通用的组件，并在不同的地方使用它们。例如，一个按钮组件可以根据不同的属性进行样式和行为的调整。

示例：可复用的按钮组件

function Button({ color, onClick, children }) {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {children}
    </button>
  );
}

// 使用可复用的按钮组件
function App() {
  return (
    <div>
      <Button color="blue" onClick={() => alert('Clicked!')}>Click Me</Button>
      <Button color="red" onClick={() => alert('Clicked again!')}>Click Me Too</Button>
    </div>
  );
}

在这个例子中，Button 组件是可复用的，可以接受不同的颜色和点击事件的处理函数。

6. 小结

组件化是 React 核心理念之一，它允许开发者将复杂的 UI 拆分为更小、更易于管理的部分。通过组合、状态管理和生命周期方法，我们能够构建功能强大且高效的用户界面。

在接下来的章节中，我们将进一步探讨如何使用更高级的组件形式，例如 高阶组件 和 自定义 Hook，以实现更多的功能和复用性。