React 实用进阶指南（1） - 纵览函数组件与类组件

2024-02-06 01:00:27

函数组件与类组件是 React 中两种最基本且不可或缺的组件类型。函数组件是无状态组件，这意味着它们没有内部状态。类组件是有状态组件，这意味着它们具有内部状态，可以随着时间而改变。

函数组件与类组件的主要区别在于：

状态管理： 函数组件没有内部状态，这意味着它们不能跟踪自己的数据。如果需要存储数据，则必须使用外部状态管理库，例如 Redux 或 Zustand。类组件具有内部状态，这意味着它们可以跟踪自己的数据。
性能： 函数组件通常比类组件性能更好。这是因为函数组件没有内部状态，因此不需要进行额外的渲染。类组件具有内部状态，因此每次状态更改时都需要重新渲染。
可扩展性： 函数组件通常比类组件更具可扩展性。这是因为函数组件更容易测试和维护。类组件通常更难测试和维护，因为它们具有内部状态。

函数组件

函数组件是无状态组件，这意味着它们没有内部状态。函数组件通常使用 ES6 箭头函数编写，如下所示：

const MyComponent = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

函数组件通常用于展示数据或处理用户交互。

类组件

类组件是有状态组件，这意味着它们具有内部状态。类组件通常使用 ES6 类编写，如下所示：

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

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

类组件通常用于处理复杂的数据或逻辑。

函数组件与类组件的比较

特性	函数组件	类组件
状态管理	使用外部状态管理库	具有内部状态
性能	通常性能更好	通常性能较差
可扩展性	通常更具可扩展性	通常更难扩展
用例	通常用于展示数据或处理用户交互	通常用于处理复杂的数据或逻辑