2022-06-12
Component和PureComponent的区别
介绍
React.PureComponent 与 React.Component 几乎完全相同,但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。
在PureComponent中,如果包含比较复杂的数据结构,可能会因深层的数据不一致而产生错误的否定判断,导致界面得不到更新。
如果定义了 shouldComponentUpdate(),无论组件是否是 PureComponent,它都会执行shouldComponentUpdate结果来判断是否 update。如果组件未实现 shouldComponentUpdate() ,则会判断该组件是否是 PureComponent,如果是的话,会对新旧 props、state 进行 shallowEqual 比较,一旦新旧不一致,会触发 update。
区别点
PureComponent自带通过props和state的浅对比来实现 shouldComponentUpate(),而Component没有。
PureComponent优缺点
缺点
可能会因深层的数据不一致而产生错误的否定判断,从而shouldCompentUpdate结果返回false,界面得不到更新
优点
不需要开发者自己实现shouldComponentUpdate,就可以进行简单的判断来提升性能
产生深层数据不一致的原因
PureComponent通过props和state的浅对比决定是否更新的
这个浅对比,是用Object.is来对Object的value做了一个基本数据类型的比较
function is (x, y) {
if (x === y) {
// 运行到1/x === 1/y的时候x和y都为0,但是1/+0 = +Infinity, 1/-0 = -Infinity, 是不一样的
return x !== 0 || y !== 0 || 1 / x === 1 / y
} else {
// NaN===NaN是false,这是不对的,我们在这里做一个拦截,x !== x,那么一定是 NaN, y 同理
// 两个都是NaN的时候返回true
return x !== x && y !== y
}
}
/*这种相等性判断逻辑和传统的 == 运算不同,== 运算符会对它两边的操作数做
隐式类型转换(如果它们类型不同),然后才进行相等性比较,
(所以才会有类似 "" == false 等于 true 的现象)但 Object.is 不会做这种类型转换。
这与 === 运算符的判定方式也不一样。=== 运算符(和== 运算符)将
数字值 -0 和 +0 视为相等,并认为 Number.NaN 不等于 NaN。*/
并不能很好地比对出变化,所以导致了不更新
Immutable
一个持久性数据结构的库,持久性指的是数据一旦创建,就不能再被更改,任何修改或添加删除操作都会返回一个新的Immutable对象。可以让我们更容易地区处理缓存、回退、数据变化检测等问题,简化开发。
import { Map } from "immutable";
const map1 = Map({ a: { aa: 1 }, b: 2, c: 3 });
const map2 = map1.set('b', 50);
map1 !== map2; // true
map1.get('b'); // 2
map2.get('b'); // 50
map1.get('a') === map2.get('a'); // true复制代码
可以看到,修改map1的属性返回map2,他们并不是指向同一存储空间,只要map1声明了,所有的操作都不会改变它。
ImmutableJS提供了大量的方法去更新、删除、添加数据,极大地方便了我们操纵数据。
原生类型与ImmutableJS类型判断与转换方法:
import { fromJS, isImmutable } from "immutable";
const obj = fromJS({
a: 'test',
b: [1, 2, 4]
}); // 支持混合类型
isImmutable(obj); // true
obj.size(); // 2
const obj1 = obj.toJS(); // 转换成原生 `js` 类型复制代码
两大特性
immutable data structures(持久性数据结构)与 structural sharing(结构共享)
持久性数据结构保证数据一旦创建就不能修改,使用旧数据创建新数据时,旧数据也不会改变。
结构共享是指没有改变数据共用一个引用,减少了深拷贝的性能消耗,也减少了内存。
PureComponent和ImmutableJS简直天生一对
PureComponent会因为并没有改变prop和state的引用导致不重新渲染,而ImmutableJS保证修改操作返回一个新的引用,并且只修改需要修稿的节点,其他节点引用保持不变。可以看出来,PureComponent与ImmutableJS简直天生一对。