[React] Class Components 和 Function Components 有区别？【热度: 229】

关键词：Class Components 和 Function Components、Class Components 和 Function Components 区别、Class Components 和 Function Components 差异

概要对比

Class组件是使用ES6的类语法定义的组件，它是继承自React.Component的一个子类。Class组件有自己的状态和生命周期方法，可以通过this.state来管理状态，并通过this.setState()来更新状态。

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

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

函数组件是使用函数来定义的组件，在React 16.8版本引入的Hooks之后，函数组件可以拥有自己的状态和副作用，可以使用useState和其他Hooks来管理状态。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

函数组件通常比Class组件更简洁和易于理解，尤其是在处理简单的逻辑和状态时。然而，Class组件仍然在一些特定情况下有它们的优势，例如需要使用生命周期方法、引入Ref或者需要更多的精确控制和性能优化时。

细节对比

方面	Class组件	函数组件
语法	使用ES6类语法定义组件	使用函数语法定义组件
继承	继承自React.Component类	无需继承任何类
状态管理	可通过this.state和this.setState来管理状态	可使用useState Hook来管理状态
生命周期方法	可使用生命周期方法，如componentDidMount、componentDidUpdate等	可使用Effect Hook来处理副作用
Props	可通过this.props来访问父组件传递的props	可通过函数参数来访问父组件传递的props
状态更新	使用this.setState来更新状态	使用对应的Hook来更新状态
内部引用	可以通过Ref引用组件实例或DOM元素	可以使用Ref Hook引用组件实例或DOM元素
性能优化	可以使用shouldComponentUpdate来控制组件是否重新渲染	可以使用React.memo或useMemo Hook来控制组件是否重新渲染
访问上下文	可以使用this.context来访问上下文	可以使用useContext Hook来访问上下文

需要注意的是，这只是一些常见的区别，并不是所有的区别。在实际开发中，具体的区别可能还会根据需求和使用的React版本而有所变化。