狀態管理庫 MobX 和 react

class todostore 
report() ". ` + 
`progress: $/$`; 
}    addtodo(task) );	}}
const todostore = new todostore();

當我們去建立乙個 todostore，他擁有乙個 todos 集合，現在我們往這個 todostore 裡新增一些東西，為了明顯起見，就呼叫 todostore.report

todostore.addtodo("read mobx tutorial");
console.log(todostore.report());
todostore.addtodo("try mobx");
console.log(todostore.report());
todostore.todos[0].completed = true;
console.log(todostore.report());
todostore.todos[1].task = "try mobx in own project";
console.log(todostore.report());
todostore.todos[0].task = "grok mobx tutorial";
console.log(todostore.report());

太巧了，這就是 mobx 能為你做的事情。自動執行只在 state 改變的時候觸發，就好像 excel 中的圖表只在單元格資料改變時更新一樣。為了達到這個目標，todostore必須成為可觀測的（observable）才行，讓我們來改一些**。

observable & computed

同時，completedtodoscount 屬性應該被自動派生，使用 @observable 和 @computed 裝飾器來做這些事情：

class observabletodostore 
@computed get completedtodoscount() 
@computed get report() ". ` + 
`progress: $/$`; 	} 
addtodo(task) );
}} const observabletodostore = new observabletodostore();

在這個構造器中，我們使用autorun包裹了乙個打出report的小函式。autorun裡的東西首先會執行一次，然後當其中的函式有observable的資料發生變化時，會再次執行。這裡我們使用了todos屬性，每次todos變化了我們就列印出新的東西。測試一下

observabletodostore.addtodo("read mobx tutorial");
observabletodostore.addtodo("try mobx");
observabletodostore.todos[0].completed = true;
observabletodostore.todos[1].task = "try mobx in own project";
observabletodostore.todos[0].task = "grok mobx tutorial";

@observable good = 
@computed get totalprice() 
// 陣列
@observable goodslist = [,]

問題？解決方案

export default class good
@computed
get totalprice()    
}

@action
addgood(...args)

很多人把mobx當作另外乙個redux，但是它僅僅是乙個庫，不是乙個什麼架構。上面的例子還是需要程式設計師自己去組織邏輯和store或者控制器什麼的.

10分鐘極速入門 mobx

sf @computed使用

react 官網

原文發布時間為：2023年06月27日

pandaaa

狀態管理庫 MobX 和 react

狀態管理庫 MobX 和 react

React專案中使用Mobx狀態管理（二）

React專案中使用Mobx狀態管理（一）

狀態管理庫 MobX 和 react

狀態管理庫 MobX 和 react

React專案中使用Mobx狀態管理（二）

React專案中使用Mobx狀態管理（一）

相關推薦