react函数式组件和类式组件的区别

一、语法不同，设计思想也不同

函数式组件是基于使用 function 定义的函数，函数式组件 和 普通函数 最主要的区别在 调用的时候，函数式组件在渲染的时候没有 被人为显式调用，而是由 React 内部去调用

在执行了 ReactDOM.render(<MyComponent/>,...) 之后，react 做了哪些事情呢：

(1) react 先解析组件标签 id ==> demo，通过标签 找到了MyComponent 组件；

(2) react 发现组件是函数定义的，接着 调用 这个函数；

(3) react 将函数返回的 虚拟 DOM 转换为 真实DOM;

(4) 最后呈现在页面中

类式组件是基于使用 class 定义的类，需要继承自 React.Component；另外，类式组件中必须实现 render函数

不难发现，类式组件 和 函数式组件 不同的地方就是在创建组件的地方，而在渲染的时候则是一样。同样，在执行了 ReactDOM.render(<MyComponent/>,...) 之后，react 做了哪些事情呢：

(1) react 先解析组件标签 id ==> function，通过标签 找到了MyComponent 组件；

(2) react 发现组件是用类定义的，接着 new 一个该类的实例；

(3) react 通过该实例 调用 到类原型上的 render 方法；

(3) react 将 render 返回的 虚拟 DOM 转换为 真实DOM;

(4) 最后呈现在页面中；

二、生命周期、状态变量

类式组件：使用state对象定义状态变量，有诸如componmentDidMount、shouldComponentUpdate等生命周期钩子函数；

函数式组件：没有this,使用一系列的内置hooks实现对应的功能，比如使用useState创建状态变量，使用useEffect实现类似于componmentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。

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

后期补充，今天写不完了