react 函数组件和类组件的异同点

源码编译之后type都是function
class类组件在component.prototype.isReactComponent = {}
class类里面继承React.Component方法
通过isReactComponent判断是不是类组件

相同点
他们都可以接收属性并返回React元素
不同点
1.编程思想不同：类组件需要创建实例，是基于面向对象的方式编程，而函数式组件不需要创建实例，接收输入，返回输出，是基于函数式编程的思想
2.内存占用不同：类组件需要创建并保存实例，会占用一定内存，函数组件不需要创建实例，可以节约内存占用

class ClassComponent extends React.Component{
 render(){
   return virtualDom
 }
}
let classComponent = new ClassComponent()
let classComponent = classComponent.render()

3.捕获特性：函数组件具有值捕获特性

//类组件
setState拿到的永远是最新的值
//函数组件
打印count时是当时渲染函数的值，老的值
setCount的结果在useEffect里面才会更改

4.可测试性：函数式组件更方便编写单元测试
5.状态：类组件有自己的实例，可以定义状态，可以修改更新状态，函数式组件以前没有状态，现在可以使用useState使用状态
6.生命周期：类组件有自己完整的生命周期，可以在生命周期内编写逻辑，函数组件用useEffect实现
7.逻辑复用：类组件可以通过继承实现逻辑的复用，但官方推荐组合优于继承，函数组件可以通过自定义Hooks实现逻辑的复用
8.跳过更新：类组件可以通过ShouldComponentUpdate和PureComponent来跳过更新，而函数式组件可以使用React.memo来跳过更新
9.发展前景：未来函数式组件将成为主流，因为他可以更好的屏蔽this问题，规范和复用逻辑，更好的适合时间分片和并发渲染