寫下這篇文章前因?yàn)橹肮ぷ鏖_會(huì)上聽了同事曾說過不知道為什么狀態(tài)都放在Mobx倉庫里排作，感覺有點(diǎn)不好，畢竟大家用vue太多了不太理解react和倉庫間的關(guān)系寇僧。
但其實(shí)用了mobx就最好不要用state摊腋，state無法實(shí)時(shí)監(jiān)聽Mobx的變化沸版，同時(shí)只能在render函數(shù)監(jiān)聽Mobx的實(shí)時(shí)變化，并且若打算通過componentDidUpdate去監(jiān)聽Mobx變化不太明智并且不好使用（同時(shí)必須在render函數(shù)先取得mobx的數(shù)據(jù)才能監(jiān)聽）兴蒸。
1.使用state一般在多個(gè)組件間不需要共享狀態(tài)视粮，僅僅在當(dāng)前的組件中使用，但相反其實(shí)本人覺得很難界定該狀態(tài)未來的拓展和使用上橙凳，是否會(huì)因?yàn)樾枨蟮母淖兌饾u需要共享蕾殴，這點(diǎn)后續(xù)再深入；
2.使用mobx一般在多個(gè)組件間需要共享狀態(tài)岛啸，但是有個(gè)難題就是當(dāng)需要共享的狀態(tài)多的時(shí)候钓觉，action提交改變狀態(tài)的方法也需要寫很多，并不能像vue一樣直接直接在data負(fù)責(zé)實(shí)時(shí)監(jiān)聽倉庫坚踩。
3.此外說明一點(diǎn)state無法實(shí)時(shí)監(jiān)聽倉庫荡灾，實(shí)際上只能監(jiān)聽該初始值，例如：
this.state{
name:this.props.store.status
}
4.此時(shí)會(huì)想到利用render函數(shù)去監(jiān)聽mobx再利用setState賦值到state去堕虹，但state的機(jī)制是實(shí)時(shí)變化改變r(jià)ender函數(shù)重新渲染卧晓，所以當(dāng)你setState改變狀態(tài)時(shí)候會(huì)觸發(fā)render函數(shù)重渲染而造成死循環(huán)
5.mobx倉庫的數(shù)組跟我們平常使用的數(shù)組有少許區(qū)別，mobx有它獨(dú)特的數(shù)組屬性赴捞，所以當(dāng)你直接使用Mobx里的數(shù)據(jù)狀態(tài)時(shí)候會(huì)有warning提醒不能直接使用該屬性逼裆，最好就是利用deep.js深拷貝或其他方式slice()之類復(fù)制出來再使用
此外送上一個(gè)深拷貝方法：
export const deepClone = (obj) => {
const objClone = Array.isArray(obj) ? [] : {}
if (obj && typeof obj === 'object') {
for (const key in obj) {
if (obj[key] && typeof obj[key] === 'object') {
objClone[key] = this.deepClone(obj[key])
} else {
objClone[key] = obj[key]
}
}
}
return objClone
}
