在剛開始做頁面時, 數據綁定的時候, 對一個爲array的list進行了observable, 裏面的值改變的時候, 並不會重新渲染頁面
這裏面就涉及到MobX會對什麼做出反應?這個問題
MobX會對在追蹤函數執行過程中讀取現存的可觀察屬性做出反應
"讀取":是對象屬性的間接引用, 可以用過"."或者"[ ]"的形式完成. eg:user.name或者user['name']
"追蹤函數"是computed表達式,observer組件的render()方法和when, reaction 和 autorun的第一個入參函數
"過程(during)"意味着只追蹤那些在函數執行時被讀取的observable.這些值是否由追蹤函數直接或間接使用並不重要
換句話說，MobX 不會對其作出反應:
- 從 observable 獲取的值，但是在追蹤函數之外
- 在異步調用的代碼塊中讀取的 observable
後來查看了官方文檔, 才發現MobX追蹤屬性訪問, 而不是值
通過官方的文檔和圖可以清晰的看出來
比如代碼如下:
let message = observable({
title: "Foo",
author: {
name: "Michel"
},
likes: [
"John", "Sara"
]
})
現在 MobX 基本上所做的是記錄你在函數中使用的是哪個箭頭。之後，只要這些箭頭中的其中一個改變了(它們開始引用別的東西了)，它就會重新運行。
比如有個數字list= [1, 2, 3], 如果觀測list 當list[0]=5,的時候, 這個時候並不會引起重新渲染, 就像圖上面的值是改變的, 但是箭頭的指向仍然是原來的, 所以就不用改變, 這個我感覺有點像c,c++中的指針, 只有當指針的指向發生改變的時候, 才能被重新觀察到, 如果裏面的值改變, 是不會引起重新渲染的.
這個時候可以將list中使用observable, 它在默認情況下會進行遞歸應用, 到每個list[0],list[1],list[2]中, 但是這樣會引起大量的重複渲染, 最好的還是將每個模塊細分化, 渲染的時候只渲染一部分