共计 749 个字符，预计需要花费 2 分钟才能阅读完成。
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 办法更新组件。
