immer优化react
React.js性能优化
js中可变数据的问题
- 互相引用的问题
const obj1 = {
todo: "Learn typescript1",
done: true,
id: '1',
list: {
todo: "Try immer1",
done: false
}
}
const obj2 = obj1;
obj2.todo = '我改变了了数据';
console.log(obj1);
// {
// todo: "我改变了了数据", done: true,
// id: '1',
// list: {
// todo: "Try immer1",
// done: false
// }
// }
JS 普通数据类型之间是没有互相引用的问题的,对象之所有这样设计是因为要节约内存,但是在实际的生产过程当中这样的设计会引发无穷无尽的问题,解决互相引用的问题ES6提供了 Object.assign, 也可以用深拷贝
- Object.assign 的问题
const obj1 = {
todo: "Learn typescript1",
done: true,
id: '1',
list: {
todo: "Try immer1",
done: false
}
}
const obj2 = Object.assign({}, obj1) // {... obj1}
obj2.list.todo = '我改变了了数据'
console.log(obj1);
// {
// todo: "Learn typescript1",
// done: true,
// id: '1',
// list: {
// todo: "我改变了了数据",
// done: false
// }
// }
Object.assign 的问题为断层太短
- 深拷贝
深拷贝的问题在于给每一个节点都做了拷贝,会浪费内存
immer.js 和 immutable.js
import produce from "immer"
const obj1 = {
todo: "Learn typescript1",
done: true,
id: '1',
list: {
todo: "Try immer1",
done: false
},
list1: {
todo: "Try immer1",
done: false
}
}
const obj2 = product(obj1, nextData => {
nextData.list.todo = '我改变了了数据';
});
console.log(obj1);
//{
// todo: "Learn typescript1",
// done: true,
// id: '1',
// list: {
// todo: "Try immer1",
// done: false
// },
// list1: {
// todo: "Try immer1",
// done: false
// }
//}
console.log(obj2);
//{
// todo: "Learn typescript1",
// done: true,
// id: '1',
// list: {
// todo: "我改变了数据",
// done: false
// },
// list1: {
// todo: "Try immer1",
// done: false
// }
//}
if(obj1.list1 === obj2.list1) {
console.log('obj1.list1等于obj2.list1'); //相等
}
obj2.list.todo = ‘第二次改变数据'; // TypeError: Cannot assign to read only property 'todo' of object
- immer.js 的实现原理
const obj4 = new Proxy(obj1, {
get: function (target, key, receiver) {
console.log(target, key, receiver);
return '我是被拦截的get'
},
set: function (target, key, value, receiver) {
console.log(target, key, value, receiver);
// Reflect.set(target, key, value, receiver);
return '此对象不允许被修改';
}
});
immer.js 支持 ES5,ES6, 上面为ES6的实现方式, 利用了 ES6的 Proxy 对象,这个对象顾明思议就是代理的意思,它会为对象的第一层设置代理对象,读取对象和赋值对象的时候都会调用到 get 和 set 方法,
上面的示例代码中 obj2.todo = ‘第二次改变数据' 报错了,因为 immer 通过代理对象拦截到了, immer不允许直接修改原对象本身...
const obj3 = product(obj2, nextData => {
nextData.list.todo = ‘第二次改变数据';
});
上面才是修改 obj2 的正确姿势, 当你在
nextData => {
nextData.todo = ‘第二次改变数据';
}
这个箭头函数在immer中最终会调用到 set 方法, 如果它发现你修改了
list.todo , 他会重新生成一个 list 对象返回, 并依次向上便利对象的每一个节点重生生成对象
可变数据在React.js中的使用问题
this.state = {
data: {
todo: "Learn typescript1",
done: true,
id: '1',
one: {
todo: "Try immer1",
done: false,
list1: {
todo: "Try immer1",
done: false
}
},
two: {
todo: "Try immer1",
done: false,
}
},
isShow: false,
}
<div>{data.one.list1.todo}</div>
<button onClick={() => {
console.log('我被点击了');
const { data: {one : { list1 } } } = this.state
this.viewModel(list1);
this.setState({ done: true })
consolo.log(list1);
}}>点我</button>
如果data为不可变对象, 我们可以毫不犹豫的说出 consolo.log(list1) 的输出结果
但是如果为可变对象,我们根本不知道 this.viewModel 会对list1 做什么,如果是这样呢?
viewModel(data) {
data.todo = "我不小小被修改了";
}
shouldComponentUpdate
我们知道 避免重复渲染 要靠 shouldComponentUpdate 方法,但是这里涉及 this.state 和 nextState 的比较问题, 如果对 nextState 对象进行遍历 和 this.state 进行比较,这样太消耗性能 我们只希望遍历 nextState 下的第一层对象进行比较, 也就是 nextState.data === this.state.data, 想用这种比较方式的话肯定不能在原对象上进行修改,否者 nextState.data === this.state.data 永远返回为true
有了immer 你可以轻松的实现这一点
this.setState(product(data, nextData => {
nextData.one.list1.todo = '我要修改数据'
}))
当然,你也可以这样
const newList = Object.assign({}, list1)
const newData = Object.assign({}, this.state.data)
const newOne = Object.assign({}, this.state.data.one)
newData.one = newOne;
newOne.list1 = newList;
newList.todo = '我要修改数据'
不过似乎还是 immer 更为优雅
不可变的key
在遍历生成 ReactElement 的时候往往会被要求添加key, 用来判断 ReactElement 是否有变化此时key起了关键作用, 此时的key应该为不可变的key,不易为index, 为什么呢?
如果你往数组尾部添加一个数据还好, oldKey 和 newKey 比较并不会有什么差异.
如下图:
图1
但是 如果往数组中插入一条数据就会变成这样
图2
本来没有更新,但是比较时候发现key变了.
无状态组件
如果你不需要生命周期,推荐使用无状态组件
const element = () => <div>good</div>
