React 组件之 Component PureComponent Function Component
时间:2019-08-27
本文章向大家介绍React 组件之 Component PureComponent Function Component,主要包括React 组件之 Component PureComponent Function Component使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Virtual DOM , 通过高效的Diff算法对变化的部分首尾两端做批量更新,所有的比较都是浅比较shallowEqual。谁都玩不起深比较,facebook自己都做不到~
Component :一定要配套使用shouldComponentUpdate , 否则不管props or state是否更新组件一定更新
pureComponent :当组件的props和state不变时,组件是不更新的。仅仅只需要替换component => pureComponent,零投入超高回报
function Component:写纯函数组件非常简洁优雅,官方也推荐这种写法。但是,这并不代表纯函数组件是性能最好的组件写法。
在内部被包装成了一个只有render方法的StatelessComponent组件,在所有情况下都会更新。
(facebook说过要优化StatelessComponent,要优化它的性能也很简单,但就是一直没优化,也不知道为什么。后来我才知道有了终极解决方案,React Hook)
因此,并不建议使用它写比较复杂的组件
总结:
PureComponent > StatelessComponent > Component
function Component vs PureCompoent ,不建议比较复杂的页面,使用function Component.
参考知乎链接:React组件性能优化实例解析 https://zhuanlan.zhihu.com/p/34632531
原文地址:https://www.cnblogs.com/ajaxkong/p/11419061.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 将有序数组转化为二叉搜索树
- 至少有K个重复字符的最长子串
- django这些查询技巧你会了吗?
- 手把手教你配置vim,小白也可以
- 【NPM库】- 0x02
- 最长有效括号
- 统计全为1的子矩形
- Android Camera1中的人脸检测
- Executors功能如此强大,ThreadPoolExecutor功不可没(一)
- dotNET:怎样处理程序中的异常(实战篇)?
- 二维背包问题
- 小程序系列之禁用视频快进
- springBoot整合Mq报错:JmsMessagingTemplate that could not be found
- TCP:测试小工具TCPing
- 对象实例化内存布局与访问定位 Krains 2020-08-14