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