关于前端: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问题，标准和复用逻辑，更好的适宜工夫分片和并发渲染