一、类组件

类组件，通过ES6的类class的编写形式去编写组件，该类必须继承React.Component

访问父组件传递过来的参数，可以通过this.props的方式去访问

在组件中必须实现render方法，在return中返回React对象，如下：

class Welcome extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

优点：
- 拥有更多的功能和生命周期方法，可以进行更复杂的逻辑处理和渲染优化
- 可以使用state来管理组件的状态，使得组价更加灵活和动态化
- 可以使用ref引用DOM元素，实现更细粒度的控制和操作
缺点：
- 在类组件中复用状态逻辑很难
- 定义和使用较繁琐，需要继承React.component并实现render()方法
- 存在函数组件所没有的额外语法和复杂性
- 由于类组件有自己的生命周期方法和状态管理，容易导致组件层次结构较深，难以维护

二、函数组件

函数组件，就是通过函数编写的形式去实现一个React组件，是React中定义组件最简单的方式。示例如下：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

函数组件本质上 JavaScript 函数。

优点：
- 定义和使用较简单和直观，只需要一个函数即可
- 对于简单的组件，可以使用函数组件来提高性能和简化开发
- 可以使用React Hooks来管理组件的状态和生命周期，实现与类组件的类似的功能
缺点：
- 缺少类组件所拥有的生命周期方法和状态管理能力，不能进行复杂的逻辑处理和优化
- 无法使用ref引用DOM元素，限制了组件的操作和控制能力
- 对于比较复杂的组件，可能需要使用类组件来实现

三、类组件和函数组件的异同点

3.1 区别点

针对两种React组件，其区别主要分成以下几大方向：

编写形式
状态管理
生命周期
调用方式
获取渲染的值

1. 编写形式

两者最明显的区别在于编写形式的不同，同一种功能的实现可以分别对应类组件和函数组件的编写形式：

函数组件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件：

class Welcome extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

2. 状态管理

在 hooks 出来之前，函数组件是无状态组件，不能保管组件的状态，不能像类组件中调用 setState ，如果想要管理 state 状态，可以使用 useState ，如下：

const FunctionalComponent = () => {
    const [count, setCount] = React.useState(0);

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

在使用 hooks 的情况下，一般如果函数组件调用 state ，则需要创建一个类组件和者 state 提升到你的父组件中，然后通过 props 对象传递到子组件

3. 生命周期

生命周期钩子都来自于继承的 React.Component。所以：

类组件：存在生命周期。
函数组件：不存在生命周期。

4. 调用方式

类组件：需要将组件进行实例化，然后调用实例对象的 render 方法

// 你的代码 
class SayHi extends React.Component { 
    render() { 
        return <p>Hello, React</p > 
    } 
} 
// React内部 
const instance = new SayHi(props) // » SayHi {} 
const result = instance.render() // » <p>Hello, React</p >

函数组件：调用就是执行函数即可

// 你的代码 
function SayHi() { 
    return <p>Hello, React</p > 
} 
// React内部 
const result = SayHi(props) // » <p>Hello, React</p >

5. 获取渲染的值

props 在 React 中是不可变的所以它永远不会改变，但是 this 总是可变的，以便您可以在 render 和生命周期函数中读取新版本。

因此，如果我们的组件在请求运行时更新。this.props 将会改变。

类组件：当props的数据更新后，组件内拿到的是最新值
函数组件：本身不存在this， props 并不会发生改变，所以当props的数据更新后，组件内拿到的依然是旧值

3.2 共同点

两者的共同点主要有以下几点：

无论是是使用函数或是类来声明一个组件，它决不能修改它自己的props
所有React组件都必须是纯函数，并禁止修改其自身props
React是单向数据流，父组件改变了属性，那么子组件视图会更新
属性props是外界传递过来的，状态state是组件本身的，状态可以在组件中任意修改组件的属性和状态改变都会更新视图

总结

函数组件：语法更短、更简单，这使得它更容易开发、理解和测试
类组件：也会因大量使用 this而让人感到困惑

转载：面试官：说说对React中类组件和函数组件的理解？有什么区别？

【React】类组件和函数组件