mobx state tree
v7.0.1
ในทางเทคนิคการพูด MOBX-State-Tree (หรือที่เรียกว่า MST) เป็นระบบคอนเทนเนอร์ของรัฐที่สร้างขึ้นบน MOBX ซึ่งเป็นไลบรารีรัฐปฏิกิริยาที่ใช้งานได้
นี่อาจไม่ได้มีความหมายกับคุณมากนักและไม่เป็นไร ฉันจะอธิบายแบบนี้: MOBX คือการจัดการสถานะ "เอ็นจิ้น" และ MOBX-State-Tree ให้โครงสร้างและเครื่องมือทั่วไปที่คุณต้องการสำหรับแอปของคุณ MST นั้นมีค่าในทีมขนาดใหญ่ แต่ยังมีประโยชน์ในแอปพลิเคชันขนาดเล็กเมื่อคุณคาดหวังว่ารหัสของคุณจะปรับขนาดได้อย่างรวดเร็ว และถ้าเราเปรียบเทียบกับ Redux MST ให้ประสิทธิภาพที่ดีขึ้นและรหัสหม้อไอน้ำน้อยกว่า Redux!
MOBX เป็นหนึ่งในทางเลือก Redux ที่ได้รับความนิยมมากที่สุดและใช้ (รวมถึง Mobx-State-Tree) โดย บริษัท ทั่วโลก MST เล่นได้ดีมากด้วย typeScript, React และ React Native โดยเฉพาะอย่างยิ่งเมื่อจับคู่กับ MOBX-React-Lite รองรับหลายร้านค้าการกระทำแบบ async และผลข้างเคียงช่วยให้การแสดงผลซ้ำที่มีเป้าหมายอย่างมากสำหรับแอพ React และอื่น ๆ อีกมากมาย-ทั้งหมดในแพ็คเกจที่มี การพึ่งพาศูนย์ อื่นนอกเหนือจาก MOBX
หมายเหตุ: คุณไม่จำเป็นต้องรู้วิธีใช้ MOBX เพื่อใช้ MST
ดูการสอนการเริ่มต้นใช้งานหรือทำตามหลักสูตร 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 
