一次性看懂React组件调用方式，不再晕头转向

前端

2024-01-14 07:24:48

React 组件的两种调用方式：组件式和函数式

什么是 React 组件？

React 组件是应用程序的基本构建块，它们负责渲染用户界面。组件可以是可重用的、模块化的，这使得构建复杂的用户界面变得更加容易。React 中有两种主要的方法来定义和使用组件：组件式和函数式。

组件式组件

组件式组件 使用 class 定义，并继承自 React.Component 基类。它们具有以下特征：

状态： 组件式组件可以维护内部状态，这允许它们在用户交互时更新其渲染输出。
生命周期方法： 组件式组件具有生命周期方法，例如 componentDidMount() 和 componentWillUnmount()，它们在组件的不同生命周期阶段被调用。
渲染方法： 组件式组件包含一个 render() 方法，它根据组件的状态和 props（属性）返回一个 React 元素。

函数式组件

函数式组件 使用函数定义，它们接受 props 作为参数并返回一个 React 元素。它们不具有状态或生命周期方法，这使得它们比组件式组件更轻量级。

组件式组件与函数式组件的区别

组件式组件和函数式组件之间的主要区别在于：

状态： 组件式组件可以维护状态，而函数式组件则没有。
生命周期方法： 组件式组件具有生命周期方法，而函数式组件则没有。
语法： 组件式组件使用 class 关键字定义，而函数式组件使用函数定义。
复杂性： 组件式组件通常比函数式组件更复杂，因为它们需要管理状态和生命周期。

何时使用组件式组件或函数式组件？

选择使用组件式组件还是函数式组件取决于组件的特定要求。一般来说，如果组件需要维护状态或响应生命周期事件，则应使用组件式组件。如果组件只是呈现数据并对用户交互做出反应，则应使用函数式组件。

代码示例

组件式组件示例：

class MyComponent extends React.Component {
  state = { count: 0 };

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

  render() {
    return (
      <div>
        <button onClick={this.incrementCount}>+</button>
        <span>{this.state.count}</span>
      </div>
    );
  }
}

函数式组件示例：

const MyComponent = (props) => {
  return (
    <div>
      <button onClick={() => props.incrementCount()}>+</button>
      <span>{props.count}</span>
    </div>
  );
};