在刚开始做页面时, 数据绑定的时候, 对一个为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]中, 但是这样会引起大量的重复渲染, 最好的还是将每个模块细分化, 渲染的时候只渲染一部分