react 中的 PureComponent
React.PureComponent最重要的一个用处就是优化React应用,因为它减少了应用中的渲染次数,所以对性能的提升是非常可观的。
原理:在普通的 componnet 组件中,shouldComponentUpdate 使用来限定组件是否应该被更新的,他的默认返回值都是 true,所以即便是 state 和 props 没有发生改变时,也会导致组件重绘。因此针对上述情况,React 引入了 PureComponent 纯组件,它改变了 shouldComponentUpdate 生命周期方法,会自动判断 state 和 props 是否发生了变化,从而判断是否要重新渲染组件。
弊端:纯组件 pureComponent 并使不是像他的优点一样,让人觉得很爽,千万不能头脑发热就把所有的组件都改成纯组件。
因为纯组件是浅比较,对比的是对象的引用,所以组件内部 state 和 props 发生改变时,它并不知道 state 和 props 发生了改变,所以千万不能乱使用。
react 中的 PureComponent的更多相关文章
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- 在react中实现打印功能
最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
- 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- 【原】React中,map出来的元素添加事件无法使用
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
随机推荐
- 分页语句where条件中的子查询有or关键字优化
背景 开发说: 有段SQL语句,去掉order by很快,有order by之后,查询1小时都无法返回结果. 我叫他把SQL扔给我看下. SQL代码及执行计划 select * from (selec ...
- Linux系统中使用lftp命令实现FTP上传下载
Linux 下常用的操作命令有 ftp. lftp 和 sftp,图形化界面非常好用的有 FileZilla.不过在服务器命令界面中,lftp使用比较方便,功能也比ftp更加强大.lftp的界面很像L ...
- 表单中的ngModelController
测试表单中的ngController.直接看红字结论部分即可 <!DOCTYPE html> <html lang="en"> <head> & ...
- Python3.6中文文档 又来推荐一个,之前的Python3.52看得有点懵逼 https://www.rddoc.com/doc/Python/3.6.0/zh/
https://www.rddoc.com/doc/Python/3.6.0/zh/ 大家有空看下
- 活动预告丨易盾CTO朱浩齐将出席2018 AIIA大会,分享《人工智能在内容安全的应用实践》
本文来自网易云社区 对于很多人来讲,仿佛昨天才燃起来的人工智能之火,转眼间烧遍了各个角落,如今我们的生活中,处处渗透着人工智能.10月16日,2018年 AIIA人工智能开发者大会在苏州举办,网易云易 ...
- xtu DP Training C.炮兵阵地
炮兵阵地 Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: 11856 ...
- Robot Framework中的未解之谜
今天在写测试用例的时候偶然发现了一个问题: 一.看脚本逻辑上没有问题,但是在引用变量的时候不能成功引用,脚本截图如下: 这个是关键字A的截图,没有参数. 此时在case中引用${phonesign}和 ...
- [UOJ#274][清华集训2016]温暖会指引我们前行
[UOJ#274][清华集训2016]温暖会指引我们前行 试题描述 寒冬又一次肆虐了北国大地 无情的北风穿透了人们御寒的衣物 可怜虫们在冬夜中发出无助的哀嚎 “冻死宝宝了!” 这时 远处的天边出现了一 ...
- Vim command handbook
/* 本篇文章已经默认你通过了vimtuor训练并能熟练使用大部分命令.此篇文章主要是对于tutor命令的总结和梳理.适合边学习边记忆 tutor那个完全是在学习中记忆 符合认知规律但是练习有限.所以 ...
- js9:设置cookie,读取cookie,删除cookie,保存cookie时间,String,Date对象
原文发布时间为:2008-11-11 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...