react 中的 PureComponent

React.PureComponent最重要的一个用处就是优化React应用,因为它减少了应用中的渲染次数,所以对性能的提升是非常可观的。

原理:在普通的 componnet 组件中,shouldComponentUpdate 使用来限定组件是否应该被更新的,他的默认返回值都是 true,所以即便是 state 和 props 没有发生改变时,也会导致组件重绘。因此针对上述情况,React 引入了 PureComponent 纯组件,它改变了 shouldComponentUpdate 生命周期方法,会自动判断 state 和 props 是否发生了变化,从而判断是否要重新渲染组件。

弊端:纯组件 pureComponent 并使不是像他的优点一样,让人觉得很爽,千万不能头脑发热就把所有的组件都改成纯组件。

   因为纯组件是浅比较,对比的是对象的引用,所以组件内部 state 和 props 发生改变时,它并不知道 state 和 props 发生了改变,所以千万不能乱使用。

原文地址:https://www.cnblogs.com/z-one/p/9466797.html

时间: 2024-10-09 08:32:02

react 中的 PureComponent的相关文章

React 中的 Component、PureComponent、无状态组件 之间的比较

React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px } 组件类型 说明 React.createClass 不使用ES6语法,只能使用 React.createClass 来创建组件:React对属性中的所有函数都进行了this绑定 Component 使用ES6语法创建组件:React并没有对内部的函数,进行this绑定 PureComponent shouldComponentUp

从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽

本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) 项目地址 从 0 到 1 实现 React 系列 -- JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 -- 组件和 state|props 从 0 到 1 实现 React 系列 -- 生命周期和 diff 算法 从 0 到 1 实现 React 系列 -- 优化 se

[译] 如何在React中写出更优秀的代码

目录 我们先来看 Linting 利用组件模块性.复用性和组合性 propTypes 和 defaultProps 知道何时创建新组件 组件 vs 纯组件 vs 无状态函数组件 无状态函数组件 纯组件 使用 React 开发工具 使用内联条件语句 尽可能使用代码片段库 React 本质 - 学习 React 是如何工作的 快速回顾 在React中写出更好代码的9条建议:学习关于 Linting, propTypes, PureComponent 等. Rajat S · 2018 年 4 月 1

React中setState同步更新策略

本文和大家分享的主要是React中setState同步更新相关内容,希望对大家学习React有所帮助. 为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于 this.state 来计算未来状态.典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后,再隐藏加载进度条或者外部加载提示: componentDidMount() { fetch('https://example.com') .then((res) => re

react中为什么要使用immutable

因为在react中,react的生命周期中的setState()之后的shouldComponentUpdate()阶段默认返回true,所以会造成本组件和子组件的多余的render,重新生成virtual dom,并进行virtual dom diff,所以解决办法是我们在本组件或者子组件中的shouldComponentUpdate()函数中比较,当不需要render时,不render. 当state中的值是对象时,我们必须使用深拷贝和深比较! 如果不进行深拷贝后再setState,会造成t

Immutable学习及 React 中的实践

为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象.如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2.虽然这样做可以节约内存,但当应用复杂后,这就造成了非常大的隐患,Mutable 带来的优点变得得不偿失.为了解决这个问题,一般的做法是使用 shallowCo

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非

在react中使用intro.js的的一些经验

react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇博文关于如何在react中引入文件 2 在需要的页面引入文件后, 可以给intro.js的出发点绑定函数 showIntrojs(){ introJs().start(); } 这样intro.js就可以在页面发挥作用了~ 3 intro.js只会对整个组件起作用,并且要在组件外面添加一层父元素(d

React中key的作用

对于React中key的作用,官方没有给出详细的解读,只提到在List中需要给key赋值来区分每一条记录,http://blog.csdn.net/code_for_free/article/details/50514259里讲解了key的使用场景, http://taobaofed.org/blog/2016/08/24/react-key/从三方面讲了List组件中key存在的原因和List之外使用key作为trick简化代码逻辑,本文以List中新增元素为例,从List子组件生命周期函数的