一.Mobx是什么很魂？
它是簡單的讶泰，可擴(kuò)展的狀態(tài)管理咏瑟。通過透明的函數(shù)響應(yīng)式編程，使?fàn)顟B(tài)變得簡單和可擴(kuò)展痪署。
Mbox的中心思想就是：任何源自應(yīng)用狀態(tài)的東西都應(yīng)該自動(dòng)獲得响蕴。比如有一個(gè)需求，狀態(tài)B是根據(jù)狀態(tài)A計(jì)算得到的惠桃，當(dāng)狀態(tài)A發(fā)生改變的時(shí)候，狀態(tài)B也應(yīng)該重新計(jì)算。在Mobx里面應(yīng)用它的computed辜王，就會(huì)自動(dòng)幫我們更新狀態(tài)B劈狐。這樣比較方便處理。
二呐馆、Mbox運(yùn)行機(jī)制與核心概念肥缔？
運(yùn)行機(jī)制：
上面這個(gè)模型圖描述了單向數(shù)據(jù)流思想，主要是狀態(tài)state的改變汹来，會(huì)對(duì)應(yīng)頁面UI的改變续膳，頁面UI上用戶事件的操作會(huì)觸發(fā)Actions的操作再去更新狀態(tài)。
在Mobx里收班，它的狀態(tài)state叫做observables-可觀察的狀態(tài)值坟岔，它的UI和副作用（reactions）就是observers-觀察者,當(dāng)observables發(fā)生改變時(shí)會(huì)通知到它的observers,然后觀察者可以通過actions做一下處理，再通知observables更新摔桦。
要點(diǎn)：
1社付、定義狀態(tài)使其可觀察
2、創(chuàng)建視圖響應(yīng)狀態(tài)變化
3邻耕、更改狀態(tài)
核心概念：
1.observable:可觀察的狀態(tài)值
2.actions：一些改變狀態(tài)值的動(dòng)作
3.computed：根據(jù)state的改變鸥咖，計(jì)算出來的值
4.reactions：因state或者computed value變化而引起的反應(yīng)，主要指的是UI重新渲染
常用的裝飾器：
@observable:將一個(gè)變量變得可觀察
@observer常用于React組件兄世，可監(jiān)視r(shí)ender函數(shù)里使用的可觀察變量啼辣，從而做出相應(yīng)的reactions
@autorun常用于組件類或者store類里面，監(jiān)視函數(shù)參數(shù)里使用的可觀察變量御滩，一旦變量發(fā)生變化鸥拧。做出相對(duì)于的reactions
@action?改變觀察變量值的操作
@computed?通過可觀察變量經(jīng)過函數(shù)計(jì)算得來的值，使用的時(shí)候才會(huì)計(jì)算艾恼，沒有用到的時(shí)候不會(huì)計(jì)算住涉。
三、Mbox在React里面怎么使用钠绍？
首先在項(xiàng)目里面安裝mobx和mobx-react
第一步：npm install mobx mobx-react --save
mobx會(huì)使用裝飾器語法
第二步：npm install --save-dev babel-plugin-transform-decorators-legacy // 修飾符的插件
npm install @babel/plugin-proposal-decorators // 裝飾器的一個(gè)插件
第三步:修改.babelrc
Mobx大概的實(shí)現(xiàn)原理：
在被觀察者和觀察者之間建立依賴關(guān)系：
通過一個(gè)Reaction來track一個(gè)函數(shù)舆声，該函數(shù)中訪問了Observable變量，Observable變量的get方法會(huì)被執(zhí)行柳爽，此時(shí)可以進(jìn)行依賴收集媳握，將此函數(shù)加入到該Observable變量的依賴中。
類似于：
reaction.track(function() {
mobx.beginCollect();//開始收集
handler();//被觀察函數(shù)
mobx.endCollect();//結(jié)束收集})
觸發(fā)依賴函數(shù)
上一步中Observable中磷脯，已經(jīng)收集到了該函數(shù)蛾找。一旦Observable被修改，會(huì)調(diào)用set方法赵誓，就是依次執(zhí)行該Observable之前收集的依賴函數(shù)打毛，當(dāng)前函數(shù)就會(huì)自動(dòng)執(zhí)行柿赊。
mobx底層對(duì)數(shù)據(jù)的觀察，是使用Object.defineProperty(Mobx4)或Proxy(Mobx5)幻枉，Mobx4中Array是用類數(shù)組對(duì)象來模擬的碰声，原始值是裝箱為一個(gè)對(duì)象。
Mobx-react大致工作原理：
1.observe組件第一次渲染的時(shí)候熬甫，會(huì)創(chuàng)建Reaction胰挑，組件的render處于當(dāng)前這個(gè)Reaction的上下文中，并通過track建立render中用到的observable建立關(guān)系
2.當(dāng)observable屬性修改的時(shí)候椿肩，會(huì)觸發(fā)onInvalidate方法瞻颂，track中，還是先進(jìn)行依賴收集郑象，調(diào)用forceUpdate去更新組件,然后觸發(fā)組件渲染贡这，然后結(jié)束依賴收集。
四扣唱、Mbox與Redux對(duì)比藕坯？
首先它們都是狀態(tài)管理庫，無論是Redux還是Mobx噪沙，本質(zhì)都是為了解決狀態(tài)管理混亂炼彪，無法有效同步的問題，它們都支持：
統(tǒng)一維護(hù)管理應(yīng)用狀態(tài)正歼；
操作更新狀態(tài)方式統(tǒng)一辐马，并且可控（通常以action方式提供更新狀態(tài)的途徑）；
支持將store與React組件連接局义，如react-redux喜爷，mobx-react；通常使用狀態(tài)管理庫后萄唇，我們將React組件從業(yè)務(wù)上劃分為兩類：
容器組件（Container Components）：負(fù)責(zé)處理具體業(yè)務(wù)和狀態(tài)數(shù)據(jù)檩帐，將業(yè)務(wù)或狀態(tài)處理函數(shù)傳入展示型組件；
展示型組件（Presentation Components）：負(fù)責(zé)展示視圖另萤，視圖交互回調(diào)內(nèi)調(diào)用傳入的處理函數(shù)湃密；
區(qū)別：
1.函數(shù)式和面向?qū)ο?/b>
Redux更多的是遵循函數(shù)式編程思想，而Mobx則更多從面相對(duì)象角度考慮問題四敞。
Redux提倡編寫函數(shù)式代碼泛源，如reducer就是一個(gè)純函數(shù)，純函數(shù)忿危，接受輸入达箍，然后輸出結(jié)果，除此之外不會(huì)有任何影響铺厨，也包括不會(huì)影響接收的參數(shù)缎玫；對(duì)于相同的輸入總是輸出相同的結(jié)果硬纤。
Mobx設(shè)計(jì)更多偏向于面向?qū)ο缶幊毯晚憫?yīng)式編程，通常將狀態(tài)包裝成可觀察對(duì)象碘梢，于是我們就可以使用可觀察對(duì)象的所有能力咬摇，一旦狀態(tài)對(duì)象變更，就能自動(dòng)獲得更新煞躬。
2.單一store和多store
store是應(yīng)用管理數(shù)據(jù)的地方，在Redux應(yīng)用中逸邦，我們總是將所有共享的應(yīng)用數(shù)據(jù)集中在一個(gè)大的store中恩沛，而Mobx則通常按模塊將應(yīng)用狀態(tài)劃分，在多個(gè)獨(dú)立的store中管理缕减。
3.JavaScript對(duì)象和可觀察對(duì)象
Redux默認(rèn)以JavaScript原生對(duì)象形式存儲(chǔ)數(shù)據(jù)雷客，而Mobx使用可觀察對(duì)象：
?Redux需要手動(dòng)追蹤所有狀態(tài)對(duì)象的變更；
?Mobx中可以監(jiān)聽可觀察對(duì)象桥狡，當(dāng)其變更時(shí)將自動(dòng)觸發(fā)監(jiān)聽搅裙；
4.不可變和可變
Redux狀態(tài)對(duì)象通常是不可變的，我們不能直接操作狀態(tài)對(duì)象裹芝，而總是在原來狀態(tài)對(duì)象基礎(chǔ)上返回一個(gè)新的狀態(tài)對(duì)象部逮。
而Mobx中可以直接使用新值更新狀態(tài)對(duì)象。
5.mobx-react和react-redux
使用Redux和React應(yīng)用連接時(shí)嫂易，需要使用react-redux提供的Provider和connect：
Provider：負(fù)責(zé)將Store注入React應(yīng)用兄朋；
connect：負(fù)責(zé)將store state注入容器組件，并選擇特定狀態(tài)作為容器組件props傳遞怜械；
對(duì)于Mobx而言颅和，同樣需要兩個(gè)步驟：
Provider：使用mobx-react提供的Provider將所有stores注入應(yīng)用；
使用inject將特定store注入某組件缕允，store可以傳遞狀態(tài)或action峡扩；然后使用observer保證組件能響應(yīng)store中的可觀察對(duì)象（observable）變更，即store更新障本，組件視圖響應(yīng)式更新教届。
參考資料：
https://cn.mobx.js.org/Mobx中文文檔
https://juejin.im/post/6886742591720423438前端狀態(tài)管理框架redux和mobx解析
