mobx中的inject,observer迁移至react Hooks写法

~ mobx是一个使用十分普遍的状态管理工具，在实际的开发过程中我们常常搭配react进行使用。在一些比较大的项目中，部分变量需要反复向下层组件进行传递，如果使用传统的组件props进行实现，层层包裹，未免过于繁琐，react官方针对这种场景，推出了context来进行上下文跨组件传递。而mobx也立足于react的context实现了inject语法，通过简洁的api，可以在任何想要使用全局状态的地方注入变量。为了方便进行全局的状态管理，往往设定一个全局的store,其中定义一些全局都会使用到的变量，进行状态控制，比较典型的例子如下：

这里使用decorator装饰器语法，通过字符串的方式注入全局store，组件的this上将会添加属性globalStore,通过store中的funcType的变量来控制显示的组件，该变量变化时，渲染的组件也会根据条件变化（通过observer装饰器实现）。其外围容器的写法通常如下：

其父组件通过mobx-react的provider包裹器来将全局的store作为参数传入。哪怕嵌套多层，子组件也可直接通过添加inject装饰器来使用全局store中的变量，就如Test。

react在最新的16.8中启用了hooks语法，力推函数式组件，尽管官方表示class式的组件在后续版本中并不会废弃，但是hooks是未来前端框架中组件的发展方向（最新的Vue也借鉴了react Hook的很多思路），我们需要大胆尝试新鲜事物。
到mobx官网上发现，几乎所有的例子都是基于class组件来写的，并没有发现跟react hook搭配使用的内容。。。最后在一个不起眼处，找到了一个链接，指向mobx-react的迁移文档。官方操作如下：

自己定义一个react hook,让后就可以在我们自己的组件中使用了：

从官方例子中，我们可以发现可以弃用inject语法糖，直接通过自定义的useStores，我们就可以实现获取外层provider的变量并且使用，注意此处不能使用解构赋值，否则的话会导致无法实现变量的观测（即变量改变，页面显示没有同步），如果要实现观测：

如果你还是想要自己手动实现inject方法，那么官方还给了一个简单的inject组件实现：

回到我们自己的组件，如果第一部分中的组件，要通过函数式组件的方式，使用provider提供的全局store要怎么办呢？

官方例子中的useStores会返回所有在context中的内容，也就是所有上级provider中传递的内容，此处我们通过在自己的实现中传入一个字符串来控制选取我们需要的内容。
如有任何疑问，欢迎留言交流~
————————————————————————————————————
参考文献：
mobx-react迁移官方文档：
https://mobx-react.js.org/recipes-migration

---

铁东区19573368976： 上古卷轴4obse打开后显示couldn't inject dll - ？
微奚瑞琦： 点击确定关闭弹出窗口后再次运行obse,问题解决

铁东区19573368976： 如何使用spring component 以及注意事项 - ？
微奚瑞琦： 总结如下:1. @Autowired有个required属性,可以配置为false,这种情况下如果没有找到对应的bean是不会抛异常的.@Inject和@Resource没有提供对应的配置,所以必须找到否则会抛异常.2. @Autowired和@Inject基本是一样的,因为两者都是使用AutowiredAnnotationBeanPostProcessor来处理依赖注入.但是@Resource是个例外,它使用的是CommonAnnotationBeanPostProcessor来处理依赖注入.当然,两者都是BeanPostProcessor.

铁东区19573368976： 带有ject结尾的单词有哪些啊? - ？
微奚瑞琦： 1、object n.(可见或可触摸的)物体,东西;对象;目标 v.(口头)反对,不赞成 2、subject n.题目,问题;主题;对象;学科,科目,课程;国民,臣民,臣服者;【哲】主体,主观;我,自我 adj.易受…的,常受…的;易患…的;有待于…...

铁东区19573368976： 但丁神曲中的幸福公式是什么?？
微奚瑞琦： Inject(投入) + Loyal(忠诚) + Observant(用心) + Valiant(勇敢) + Enjoyment(喜悦) + Yes(愿意) + Oligation(责任) + Unison(和谐) =I LOVE YOU(我爱你!)

铁东区19573368976： javax.inject.Inject是哪个jar包里的 - ？
微奚瑞琦： 这并非一个一般的jar包里面的类,而是一个Annotation ,用来进行标记的,就像@Override表明是重写一样javax.inject.Inject用@inject进行依赖注入的,spring相关的就有用到详细http://download.oracle.com/javaee/6/api/javax/inject/Inject.html

铁东区19573368976： 如何使用Ruby中的reject方法 - ？
微奚瑞琦： [1,3,5,7].inject{|sum,element| sum + element }

铁东区19573368976： c#mvc框架依赖注入哪个好 - ？
微奚瑞琦： 依赖注入变成了最底层的基础支撑,MVC、Routing、SignalR、Entity Framrwork等都依赖于依赖注入的IServiceProvider接口,针对该接口微软给出了默认的实现ServiceProvider,以及Ninject和AutoFac版本的包装,当然你也可以使用其它第三方的依赖注入容器,如Castle Windsor等;一旦应用了第三方容器,所有的依赖解析都会被路由到该第三方容器上.

铁东区19573368976： 科比12上的EJECT什么意思? - ？
微奚瑞琦： Inject是一个英文单词意思就是表示拒绝,也就是他不接受你的指令,他要自我发挥,实现自我.