React.js性能優(yōu)化
js中可變數(shù)據(jù)的問(wèn)題
- 互相引用的問(wèn)題
const obj1 = {
todo: "Learn typescript1",
done: true,
id: '1',
list: {
todo: "Try immer1",
done: false
}
}
const obj2 = obj1;
obj2.todo = '我改變了了數(shù)據(jù)';
console.log(obj1);
// {
// todo: "我改變了了數(shù)據(jù)", done: true,
// id: '1',
// list: {
// todo: "Try immer1",
// done: false
// }
// }
JS 普通數(shù)據(jù)類(lèi)型之間是沒(méi)有互相引用的問(wèn)題的,對(duì)象之所有這樣設(shè)計(jì)是因?yàn)橐?jié)約內(nèi)存,但是在實(shí)際的生產(chǎn)過(guò)程當(dāng)中這樣的設(shè)計(jì)會(huì)引發(fā)無(wú)窮無(wú)盡的問(wèn)題,解決互相引用的問(wèn)題ES6提供了 Object.assign, 也可以用深拷貝
- Object.assign 的問(wèn)題
const obj1 = {
todo: "Learn typescript1",
done: true,
id: '1',
list: {
todo: "Try immer1",
done: false
}
}
const obj2 = Object.assign({}, obj1) // {... obj1}
obj2.list.todo = '我改變了了數(shù)據(jù)'
console.log(obj1);
// {
// todo: "Learn typescript1",
// done: true,
// id: '1',
// list: {
// todo: "我改變了了數(shù)據(jù)",
// done: false
// }
// }
Object.assign 的問(wèn)題為斷層太短
- 深拷貝
深拷貝的問(wèn)題在于給每一個(gè)節(jié)點(diǎn)都做了拷貝,會(huì)浪費(fèi)內(nèi)存
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 = '我改變了了數(shù)據(jù)';
});
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: "我改變了數(shù)據(jù)",
// done: false
// },
// list1: {
// todo: "Try immer1",
// done: false
// }
//}
if(obj1.list1 === obj2.list1) {
console.log('obj1.list1等于obj2.list1'); //相等
}
obj2.list.todo = ‘第二次改變數(shù)據(jù)'; // TypeError: Cannot assign to read only property 'todo' of object
- immer.js 的實(shí)現(xiàn)原理
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 '此對(duì)象不允許被修改';
}
});
immer.js 支持 ES5,ES6, 上面為ES6的實(shí)現(xiàn)方式, 利用了 ES6的 Proxy 對(duì)象,這個(gè)對(duì)象顧明思議就是代理的意思,它會(huì)為對(duì)象的第一層設(shè)置代理對(duì)象,讀取對(duì)象和賦值對(duì)象的時(shí)候都會(huì)調(diào)用到 get 和 set 方法,
上面的示例代碼中 obj2.todo = ‘第二次改變數(shù)據(jù)' 報(bào)錯(cuò)了,因?yàn)?immer 通過(guò)代理對(duì)象攔截到了, immer不允許直接修改原對(duì)象本身...
const obj3 = product(obj2, nextData => {
nextData.list.todo = ‘第二次改變數(shù)據(jù)';
});
上面才是修改 obj2 的正確姿勢(shì), 當(dāng)你在
nextData => {
nextData.todo = ‘第二次改變數(shù)據(jù)';
}
這個(gè)箭頭函數(shù)在immer中最終會(huì)調(diào)用到 set 方法, 如果它發(fā)現(xiàn)你修改了
list.todo , 他會(huì)重新生成一個(gè) list 對(duì)象返回, 并依次向上便利對(duì)象的每一個(gè)節(jié)點(diǎn)重生生成對(duì)象
可變數(shù)據(jù)在React.js中的使用問(wèn)題
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('我被點(diǎn)擊了');
const { data: {one : { list1 } } } = this.state
this.viewModel(list1);
this.setState({ done: true })
consolo.log(list1);
}}>點(diǎn)我</button>
如果data為不可變對(duì)象, 我們可以毫不猶豫的說(shuō)出 consolo.log(list1) 的輸出結(jié)果
但是如果為可變對(duì)象,我們根本不知道 this.viewModel 會(huì)對(duì)list1 做什么,如果是這樣呢?
viewModel(data) {
data.todo = "我不小小被修改了";
}
shouldComponentUpdate
我們知道 避免重復(fù)渲染 要靠 shouldComponentUpdate 方法,但是這里涉及 this.state 和 nextState 的比較問(wèn)題, 如果對(duì) nextState 對(duì)象進(jìn)行遍歷 和 this.state 進(jìn)行比較,這樣太消耗性能 我們只希望遍歷 nextState 下的第一層對(duì)象進(jìn)行比較, 也就是 nextState.data === this.state.data, 想用這種比較方式的話(huà)肯定不能在原對(duì)象上進(jìn)行修改,否者 nextState.data === this.state.data 永遠(yuǎn)返回為true
有了immer 你可以輕松的實(shí)現(xiàn)這一點(diǎn)
this.setState(product(data, nextData => {
nextData.one.list1.todo = '我要修改數(shù)據(jù)'
}))
當(dāng)然,你也可以這樣
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 = '我要修改數(shù)據(jù)'
不過(guò)似乎還是 immer 更為優(yōu)雅
不可變的key
在遍歷生成 ReactElement 的時(shí)候往往會(huì)被要求添加key, 用來(lái)判斷 ReactElement 是否有變化此時(shí)key起了關(guān)鍵作用, 此時(shí)的key應(yīng)該為不可變的key,不易為index, 為什么呢?
如果你往數(shù)組尾部添加一個(gè)數(shù)據(jù)還好, oldKey 和 newKey 比較并不會(huì)有什么差異.
如下圖:
但是 如果往數(shù)組中插入一條數(shù)據(jù)就會(huì)變成這樣
本來(lái)沒(méi)有更新,但是比較時(shí)候發(fā)現(xiàn)key變了.
無(wú)狀態(tài)組件
如果你不需要生命周期,推薦使用無(wú)狀態(tài)組件
const element = () => <div>good</div>
