共计 835 个字符,预计需要花费 3 分钟才能阅读完成。
源码编译之后 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 问题,标准和复用逻辑,更好的适宜工夫分片和并发渲染
正文完