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简直天生一对。
