React 组件创建姿势大公开

在 React 世界中，组成一个页面的最小单元为一个个组件，很显然如何合理的创建它们是个非常关键的点。下面介绍一下我对三种创建组件方式的理解与总结。

类组件

类组件是 React 中创建组件的传统方式。它使用 JavaScript 类来定义组件的结构和行为。类组件可以拥有自己的状态、生命周期方法和事件处理函数。

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 })}>
          Click me
        </button>
      </div>
    );
  }
}

函数式组件

函数式组件是 React 中创建组件的一种更简单的方式。它使用 JavaScript 函数来定义组件的结构和行为。函数式组件不能拥有自己的状态，只能从父组件接收属性。

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.count}</h1>
      <button onClick={() => props.setCount(props.count + 1)}>
        Click me
      </button>
    </div>
  );
};

Hooks

Hooks 是 React 16.8 中引入的新特性。它允许我们在函数式组件中使用状态和生命周期方法。Hooks 的使用方式很简单，只需要在函数式组件中调用它们即可。

import { useState } from 'react';

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

总结

三种创建 React 组件的方式各有优缺点。类组件更灵活，但代码更复杂；函数式组件更简单，但功能有限；Hooks 介于两者之间，既简单又灵活。根据不同的场景选择合适的组件创建方式可以使代码更简洁、性能更高。

组件生命周期

组件生命周期是指组件从创建到销毁的整个过程。React 组件的生命周期主要包括以下几个阶段：

• 装载 ：组件被创建并插入到 DOM 中。
• 更新 ：组件的状态或属性发生变化时，组件会被重新渲染。
• 卸载 ：组件从 DOM 中被移除。

组件的生命周期可以通过生命周期方法来控制。生命周期方法是在组件生命周期的不同阶段被调用的函数。常用的生命周期方法包括：

• constructor ：在组件创建时被调用。
• componentDidMount ：在组件第一次被装载到 DOM 中时被调用。
• componentDidUpdate ：在组件更新时被调用。
• componentWillUnmount ：在组件从 DOM 中被移除时被调用。

组件装载

组件装载是指组件被创建并插入到 DOM 中的过程。在组件装载时，会调用组件的 constructor 和 componentDidMount 两个生命周期方法。

• constructor 方法在组件创建时被调用。它主要用于初始化组件的状态和属性。
• componentDidMount 方法在组件第一次被装载到 DOM 中时被调用。它主要用于执行一些与 DOM 相关的操作，例如获取 DOM 元素的引用或向 DOM 元素添加事件监听器。

组件卸载

组件卸载是指组件从 DOM 中被移除的过程。在组件卸载时，会调用组件的 componentWillUnmount 生命周期方法。

• componentWillUnmount 方法在组件从 DOM 中被移除时被调用。它主要用于执行一些与 DOM 相关的操作，例如移除 DOM 元素的引用或从 DOM 元素中移除事件监听器。

组件更新

组件更新是指组件的状态或属性发生变化时，组件会被重新渲染的过程。在组件更新时，会调用组件的 componentDidUpdate 生命周期方法。

• componentDidUpdate 方法在组件更新时被调用。它主要用于执行一些与组件状态或属性变化相关的操作，例如更新组件的 UI。