在react中使用Mobx問題總結

城府不落雪發表於2019-08-07
React

observer的元件，只有當前元件render方法中直接使用的資料才會被追蹤

例如

@observer
const MyComponent = ({todo})=>
    <SomeContainer 
    title = {()=><div>{todo.title}</div>} />
複製程式碼

看似todo.title是在MyComponent元件中使用的，但不是直接使用的，因為回撥函式的執行是在SomeContainer中，回撥函式title執行時，todo.title才是直接使用的，要想讓SomeContainer可以正確響應todo.title的變化，SomeContainer本身也需要observer包裝

@observer
const MyComponent = ({todo})=>
    <SomeContainer 
    title = {()=>observer(({todo})=><div>{todo.title}</div>)} />
複製程式碼

還有另外一種方法是使用mobx-react提供的Observer元件

@observer
const MyComponent = ({todo})=>
    <SomeContainer 
    title = {<Observer><div>{todo.title}</div></Observer>} />
複製程式碼

mobx只追蹤同步執行過程中的資料

var todo = observable({title: work});
autorun(()=>{
    setTimeout(()=>{console.log(todo.title)},100);
})
複製程式碼

autorun沒有響應 autorun在執行期間沒有訪問到任何可觀測物件，，todo.title是在計時器非同步執行期間訪問的

自動執行程式when僅會執行一次

when(predicate: () => boolean, effect?: () => void, options?)

predicate會自動響應它使用的任何state的變化，當返回true時，才會觸發effect函式的執行，然後 autorunner(自動執行程式) 會被清理，所以effect只會執行一次。when函式返回一個清理器以提前取消自動執行程式。

相關文章