React 学习笔记 - 揭秘 Component 的奥秘：通往 React 世界的阶梯

2023-12-08 18:12:21

React 组件：通往 React 世界的阶梯

React 中，一切皆组件，仿佛置身于一个组件的王国。组件就好比一个个积木块，这些积木块能够灵活组合，搭建出千变万化的 React 项目。为了更好地理解 React 组件，我们需要首先了解组件的类型和生命周期。

组件的类型：类组件与函数组件

在 React 世界中，组件分为两大类：类组件和函数组件。

类组件使用 ES6 的 class 语法定义，拥有自己的内部状态（state）和生命周期方法。我们可以将类组件想象成一个拥有内部数据和行为的对象。

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

  render() {
    return (
      <div>
        <h1>计数：{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点击计数
        </button>
      </div>
    );
  }
}

函数组件则是使用函数定义的组件，它没有内部状态和生命周期方法，更像是一个纯函数，接收 props 并返回 JSX 元素。

const MyComponent = (props) => {
  return (
    <div>
      <h1>计数：{props.count}</h1>
      <button onClick={() => props.onCountChange(props.count + 1)}>
        点击计数
      </button>
    </div>
  );
};

组件的生命周期

组件的生命周期是指组件从创建到销毁的过程，在这个过程中，组件会经历一系列的生命周期方法。这些生命周期方法可以帮助我们更好地控制组件的行为，例如，当组件挂载到 DOM 时，我们可以使用 componentDidMount 方法来执行一些初始化操作，当组件卸载时，我们可以使用 componentWillUnmount 方法来进行一些清理操作。

以下是一些常用的生命周期方法：

componentDidMount()：当组件挂载到 DOM 时调用。
componentWillUnmount()：当组件从 DOM 中卸载时调用。
componentDidUpdate(prevProps, prevState)：当组件更新时调用，它接收两个参数，分别是更新前的 props 和更新前的 state。
shouldComponentUpdate(nextProps, nextState)：当组件接收到新的 props 或 state 时调用，它返回一个布尔值，决定组件是否需要更新。

组件的属性和状态

组件的属性（props）和状态（state）是组件的重要组成部分。

属性是指从父组件传递给子组件的数据，它是只读的，不能直接修改。我们通常使用 this.props 来访问组件的属性。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>名称：{this.props.name}</h1>
        <h1>年龄：{this.props.age}</h1>
      </div>
    );
  }
}

状态则是组件内部的数据，它可以随着组件的生命周期而变化。我们通常使用 this.state 来访问组件的状态。

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

  render() {
    return (
      <div>
        <h1>计数：{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点击计数
        </button>
      </div>
    );
  }
}

渲染组件

组件的生命周期中，有一个非常重要的阶段就是渲染。组件的渲染是指将组件转换成 HTML 元素并插入到 DOM 中的过程。

在 React 中，我们使用 JSX 来渲染组件。JSX 是一种语法扩展，它允许我们使用 HTML 语法来编写 React 组件。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>名称：{this.props.name}</h1>
        <h1>年龄：{this.props.age}</h1>
      </div>
    );
  }
}

当我们使用 JSX 渲染组件时，React 会自动将 JSX 转换成 HTML 元素，并插入到 DOM 中。