react第八单元(什么是纯函数-组件的性能优化-pureComponent-组件性能优化的原理)
2024-10-19 13:20:06
课程目标
- 理解纯函数
- 熟练掌握组件性能优化的几种技巧
- pureComponent和Component的区别
#知识点
- 一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数
- 函数的返回结果只依赖于它的参数
- 函数执行过程里面没有副作用
const a = 1
const foo = (b) => a + b
foo(2) // => 3
foo 函数不是一个纯函数,因为它返回的结果依赖于外部变量 a,我们在不知道 a 的值的情况下,并不能保证 foo(2) 的返回值是 3。虽然 foo 函数的代码实现并没有变化,传入的参数也没有变化,但它的返回值却是不可预料的,现在 foo(2) 是 3,可能过了一会就是 4 了,因为 a 可能发生了变化变成了 2。
const a = 1
const foo = (x, b) => x + b
foo(1, 2) // => 3
现在 foo 的返回结果只依赖于它的参数 x 和 b,foo(1, 2) 永远是 3。今天是 3,明天也是 3,在服务器跑是 3,在客户端跑也 3,不管你外部发生了什么变化,foo(1, 2) 永远是 3。只要 foo 代码不改变,你传入的参数是确定的,那么 foo(1, 2) 的值永远是可预料的。
这就是纯函数的第一个条件:一个函数的返回结果只依赖于它的参数。
函数执行过程没有副作用 一个函数执行过程对产生了外部可观察的变化那么就说这个函数是有副作用的。
- 组件性能优化
- 定制shouldComponentUpdate函数 shouldComponentUpdate的作用,pureComponent继承和Component继承。如果你的组件只有当
props.color
或者state.count
的值改变才需要更新时,你可以使用shouldComponentUpdate
来进行检查 render
里面尽量减少新建变量和bind函数,传递参数是尽量减少传递参数的数量- Immutable.js 不可变数据类型
- 多个react组件性能优化,key的优化
- pureComponent和Component的区别
如果你知道在什么情况下你的组件不需要更新,你可以在 shouldComponentUpdate 中返回 false 来跳过整个渲染过程。其包括该组件的 render 调用以及之后的操作。 在大部分情况下,你可以继承 React.PureComponent
以代替手写 shouldComponentUpdate()
。它用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate()
的实现。
#授课思路
#案例和作业
- 完成列表渲染 实现上拉加载 注意组件性能优化
最新文章
- QQ个人文件夹中的文件被占用,解决办法
- Effective Java 创建和销毁对象
- C# 泛型的协变和逆变
- ASP.NET 网站支持多语言
- LeetCode 263
- Pentaho Data Integration Step: BD Procedure Call
- 应用程序的关闭退出(在FMX中,Activity替代了Form的概念)
- 19个非常有用的 jQuery 图片滑动插件和教程
- Coins(hdu 2844 多重背包)
- 1.对于.NET的初步理解和介绍
- nodejs 命令篇
- EL&;&;JSTL
- warmpserver 配置别人能访问自己的项目地址
- BZOJ5338[TJOI2018]xor——主席树+dfs序
- cdqz2017-test11-奇诺之旅(拟阵)
- 移动采编app
- (转)CentOS7安装Nginx1.14.2
- Linux下select&;poll&;epoll的实现原理(一)【转】
- 《从零開始学Swift》学习笔记(Day 65)——Cocoa Touch设计模式及应用之选择器
- 15.01.23-sql的注入式攻击
热门文章
- ASP.NET Core 3 起架设在 Windows IIS 方式改变
- Lumen中启用session
- HOOK API函数跳转详解
- Jmeter测试Websocket接口
- 2019 ACM/ICPC North America Qualifier G.Research Productivity Index(概率期望dp)
- 保姆级别的RabbitMQ教程!包括Java和Golang两种客户端
- PyQt(Python+Qt)学习随笔:QDateTimeEdit日期时间编辑部件
- PyQt(Python+Qt)学习随笔:树型部件的QTreeWidgetItem项中列不同角色数据的有关访问方法
- 第14章 web前端开发小白学爬虫结束语
- 【系统设计】不同分类的商品动态添加扩展属性的方法(WMS、小型电商)