mobx state tree

MOBX-State-Tree

什麼是Mobx-State-Tree？

從技術上講，MOBX-State-Tree（也稱為MST）是建立在功能性反應性狀態庫MOBX上的狀態容器系統。

這可能對您意義不大，沒關係。我會這樣解釋： MOBX是一種狀態管理“引擎”，而MOBX-State-Tree為您的應用程序提供了您所需的結構和常見工具。 MST在大型團隊中很有價值，但在您期望代碼迅速擴展時，在較小的應用程序中也很有用。而且，如果我們將其與Redux進行比較，MST提供的性能比Redux更高，更少的樣板代碼！

MOBX是最受歡迎的Redux替代品之一，全球公司（與MOBX-State-Tree一起使用）。 MST在打字稿，反應和反應天然的情況下很好地發揮作用，尤其是與MOBX-REACT-LITE配對時。它支持多家商店，異步動作和副作用，可以為React Apps提供極為有針對性的重新訂閱者，等等 - 所有這些都以除MOBX本身以外的零依賴性包裝。

注意：您不需要知道如何使用MOBX來使用MST。

入門

請參閱“入門教程”或“遵循Free Egghead.io”課程。

可以在http://mobx-state-tree.js.org/上找到官方文檔

快速代碼示例

沒有什麼比看一些代碼可以感覺到圖書館了。查看該作者的作者和推文列表的這個小示例。

 import { types } from "mobx-state-tree" // alternatively: import { t } from "mobx-state-tree"

// Define a couple models
const Author = types . model ( {
  id : types . identifier ,
  firstName : types . string ,
  lastName : types . string
} )
const Tweet = types . model ( {
  id : types . identifier ,
  author : types . reference ( Author ) , // stores just the `id` reference!
  body : types . string ,
  timestamp : types . number
} )

// Define a store just like a model
const RootStore = types . model ( {
  authors : types . array ( Author ) ,
  tweets : types . array ( Tweet )
} )

// Instantiate a couple model instances
const jamon = Author . create ( {
  id : "jamon" ,
  firstName : "Jamon" ,
  lastName : "Holmgren"
} )

const tweet = Tweet . create ( {
  id : "1" ,
  author : jamon . id , // just the ID needed here
  body : "Hello world!" ,
  timestamp : Date . now ( )
} )

// Now instantiate the store!
const rootStore = RootStore . create ( {
  authors : [ jamon ] ,
  tweets : [ tweet ]
} )

// Ready to use in a React component, if that's your target.
import { observer } from "mobx-react-lite"
const MyComponent = observer ( ( props ) => {
  return < div > Hello, { rootStore . authors [ 0 ] . firstName } ! </ div >
} )

// Note: since this component is "observed", any changes to rootStore.authors[0].firstName
// will result in a re-render! If you're not using React, you can also "listen" to changes
// using `onSnapshot`: https://mobx-state-tree.js.org/concepts/snapshots 

謝謝！

• Michel Weststrate創建了MOBX，MOBX-State-Tree和MOBX-REACT。
• 無限紅色，以支持MST的持續維護。
• Mendix的讚助和提供了從事MST等探索項目的機會。
• 丹·阿布拉莫夫（Dan Abramov）在Redux上的工作嚴重影響了MST中快照和交易行為的想法。
• 朱利奧·坎蒂（Giulio Canti）在TCOMB和類型系統上的工作一般都影響了MST的類型系統。
• 所有早期採用者都鼓勵追求這一想法，並證明這是可行的。