一、类组件

类组件，顾名思义，也就是通过使用ES6类的编写形式去编写组件，该类必须继承React.Component 如果想要访问父组件传递过来的参数，可通过this.props的方式去访问

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

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

二、函数组件

函数组件，顾名思义，就是通过函数编写的形式去实现一个React组件，是React中定义组件最简单的方式；函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。

在hooks出现之前，react中的函数组件通常只考虑负责UI的渲染，没有自身的状态没有业务逻辑代码，是一个纯函数。下面这个函数组件就是一个纯函数，它的输出只由参数props决定，不受其他任何因素影响。

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

但是这种函数组件一旦我们需要给组件加状态，那就只能将组件重写为类组件，因为函数组件没有实例，没有生命周期。所以我们说在hook之前的函数组件和类组件最大的区别是状态的有无。

Hook

React Hooks 是从 React 16.8 版本推出的新特性，目的是解决 React 的状态共享以及组件生命周期管理混乱的问题。React Hooks 的出现标志着，React 不会再存在无状态组件的情况，React 将只有类组件和函数组件的概念。

hooks为函数组件提供了状态，也支持在函数组件中进行数据获取、订阅事件解绑事件等等。下面先介绍几个最基本的hook作为基础知识。

useState：通过 useState 为组件提供状态。useState 的参数是 state 的初始值，他只有在组件第一次渲染的时候会生效，他的返回值是一个数组，第一个是 state，第二个是设置state的函数。

const [count, setCount] = useState(0);
useEffect：副作用。通常在副作用中进行ajax请求，事件的绑定与解绑，设置定时器与清除等等。
// useEffect第一个参数是一个回调函数，在里面进行业务逻辑代码的书写
// 第二个参数是依赖项数组，如果数组中的依赖发生变化，那么该副作用就会重新执行，
// 如果不设置第二个参数，那么当该组件每渲染一次，副作用就会执行一次

useEffect(() => {
    console.log("useEffect副作用执行");
    //用setTimeout模拟ajax请求
    setTimeout(() => {
      setList(result);
    }, 3000);
}, [list]);

useCallback：用于缓存函数，第一个参数为要缓存的函数，第二个参数为依赖项数组，如果依赖发生了变化，那么就会生成一个新的函数；否则当组件重新渲染时，不会重新定义这个函数，而是会取缓存。
useMemo：用于缓存函数的返回值，第一个参数为要缓存的函数（注意实际被缓存的是函数被执行过后的值），第二个参数为依赖项数组，如果依赖发生了变化，那么就会重新执行这个函数，得到新的返回值；否则当组件重新渲染时，不会重新执行这个函数，而是直接取被缓存的该函数的返回值。

useCallback，useMemo 都是用作优化函数式组件性能的。

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

简单理解

1、类组件有生命周期，函数组件没有
2、类组件需要继承 Class，函数组件不需要
3、类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行
4、类组件内部可以定义并维护 state， 函数组件都称为无状态了，可以通过hooks实现。

进阶理解

**函数式组件捕获了渲染时所使用的值，这是两类组件最大的不同**

四、使用选择

由于 class 组件的使用需要了解 this 的工作方式，还不能忘记绑定事件处理器，也没有稳定的语法提案，且不能很好的压缩，并且会使热重载出现不稳定的情况...

所以react开发人员建议使用函数组件，并推出hook来增强函数组件功能。

说说对React中类组件和函数组件的理解？有什么区别？