React 函数组件和类组件

Source: Dev.to

函数组件

在 React 中，函数组件被定义为简单的 JavaScript 函数，它们接收 props（来自父组件的属性）作为参数并返回 JSX（用于定义 UI 元素的语法扩展）。

• 编写和理解更容易，尤其是对于较简单的组件。
• 最初无法访问生命周期方法或状态，但自 React 16.8 起，它们可以使用 hooks（useState、useEffect 等）来处理状态和副作用。

示例

function Greeting(props) {
  return 
## Hello, {props.name}!
;
}

类组件

类组件被定义为继承自 React.Component 的 JavaScript 类。

• 提供内置的生命周期方法（例如 componentDidMount）。
• 通过 this.state 和 this.setState 直接管理状态。
• 适用于行为更复杂或需要与外部数据源交互的组件。

示例

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

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

  render() {
    return (
      
        
You clicked {this.state.count} times

        Click me
      
    );
  }
}

其他示例

函数组件

function Welcome(props) {
  return 
## Hello, {props.name}
;
}

类组件

class Welcome extends React.Component {
  render() {
    return 
## Hello, {this.props.name}
;
  }
}

演示

import React from "react";
import ReactDOM from "react-dom";

function Welcome(props) {
  return 
## Hello, {props.name}
;
}

class WelcomeClass extends React.Component {
  render() {
    return 
## Hello, {this.props.name}
;
  }
}

const element = ;
const elementClass = ;

ReactDOM.render(element, document.getElementById("root"));
ReactDOM.render(elementClass, document.getElementById("root-class"));

选择合适的组件

• 简单 UI： 对于仅需渲染且不涉及状态或生命周期的情况，使用函数组件。
• 复杂行为或状态： 当需要显式的生命周期方法或更复杂的状态管理时，使用类组件。
• 现代 React： 自 React 16.8 起，使用带 hooks 的函数组件因其简洁性和面向未来的特性而常被推荐。

其他考虑因素

• 性能： 函数组件通常稍快，尤其是在简单场景下。
• 可读性： 与类语法相比，hooks 可以让代码更简洁、更易读。
• 社区偏好： 当前 React 社区倾向于使用带 hooks 的函数组件，大多数新库和教程也遵循这一趋势。

结论

在函数组件和类组件之间的最佳选择取决于组件的具体需求和复杂度。评估状态管理、生命周期需求以及团队约定等因素，然后进行实验，以找到最适合项目的实现方式。

祝编码愉快！ 🔥