React中类组件和函数组件的区别

一、什么是类组件

使用 ES6 的 class来声明一个组件，如下所示

import React, { Component } from 'react'
​
export class App extends Component {
    render() {
        return (
            <div>
                Hello World
            </div>
        )
    }
}
​
export default App;
​

二、什么是函数组件

使用函数声明一个组件，接受props参数，返回一个React元素，如下

import React from 'react'
​
export default function App(props) {
    return (
        <div>
            hello,{props.name}
        </div>
    )
}

三、类组件和函数组件的区别

1、语法上

类组件继承自React的Component，必须实现render函数，constructor是可选的。

函数组件是一个纯函数，接收一个props对象返回一个React元素对象。

2、状态管理

类组件在this.state中维护自己的一些状态数据

函数组件没有内部状态

3、生命周期钩子函数

函数组件没有生命周期，也没有生命周期钩子函数。（hooks可以实现）

类组件因为继承自React.Component，所以有生命周期钩子函数。

4、调用方式

函数组件每次调用都是新的变量，返回新的React元素。

类组件会先new一个组件实例，然后调用render类方法返回React元素。