mobx
版本 4.3.1,mobx-react
版本 5.1.0。
背景
笔者最近在做 RN 我的项目时,遇到一种状况,数据源是 ObservableArray
格局,而后把这个数据源传递给 FlatList
,demo 地址。
此时,用户须要每点击一次列表都须要批改 item
,并同时须要从新渲染页面。咱们都晓得,如果须要组件从新渲染,只须要给这个组件用 observer
包裹一下就可实现。
然而当初面临一个问题,咱们所应用的组件为第三方组件,无奈给其源码包裹 observer
。那么咱们到底如何做,才能够使得数据从新渲染到页面上。当然,大部分人可能和我一样,首先想到的就是扭转数组援用地址,此时数据就会从新渲染到页面上。然而这么做,仿佛不失常,总感觉做的过于简单,明明 MobX
是响应式,并且咱们数据源的每一项 item
都是 observable
,那为什么不能通过批改 item
上的属性,让页面产生从新渲染?
解决办法
mobx-react
提供了 Observer
组件,咱们仅需用 Observer
包裹下 renderItem
的返回值即可。此时,当咱们点击每一项时,页面从新渲染,demo 地址。
Observer 组件为什么能够实现
Observer
组件外部会通过 observer
函数包裹传入的组件,使其变为响应式。
observer 为什么能够让组件变成响应式
observer
函数外部会混入生命周期函数,并在 shouldComponentUpdate
生命周期函数中做 shallowEqual
,所以当应用 observer
时,不用应用 PureComponent
。接下来,重写 render
办法为 makeComponentReactive
函数的返回值。此函数外部通过 Reaction
监听值的变动,如果所援用的值发生变化,便通过 forceUpdate
办法更新组件。