一篇文章让你认识React的Mobx!

文章是看的b站上的“React入门到实战”总结出来哒!

传送门:React入门到实战(2022全网最新)_哔哩哔哩_bilibili

目录

1.Mobx是什么东东?

2.Mobx和React是怎么打配合的?

3.Mobx怎么使用?

 4.咱就是说,直接上手做一个功能就知道了

 思路:

1.store部分:

2.连接React:

5.加一个:Mobx里的计算属性

6.Mobx的模块化:

7.总结:


既然点开了,先来体会一下Mobx的魅力吧~

一篇文章让你认识React的Mobx!_第1张图片

因为公司开发也用的Mobx~所以花了半天的时间学习了下,因为之前也用过vue的vuex,说实话Mobx确实是比较香的!下面让我们来学习一下叭:

1.Mobx是什么东东?

一篇文章让你认识React的Mobx!_第2张图片

这里插一句:介绍的时候都会说和vuex很像,但其实我感觉还是很不一样的,vuex在大型的项目上才回去用,但Mobx是只要设计状态修改都可以去使用(往下看就明白啦)

还有,Mobx就是原生js去写的!其实不止React可以用,Vue也可以!只是大家习惯把React和Mobx在一起了。

2.Mobx和React是怎么打配合的?

一篇文章让你认识React的Mobx!_第3张图片

 单单这样看会有点不太懂,翻译成大白话:

你能看到的UI界面的变化,比如用户正在输入一个表格时表格的变化,是React负责的;

而跟存到里面的数据,和后端去打配合的那些状态数据是由Store来负责的。

也就是“你主外,我住内”

3.Mobx怎么使用?

一篇文章让你认识React的Mobx!_第4张图片

一篇文章让你认识React的Mobx!_第5张图片

 4.咱就是说,直接上手做一个功能就知道了

一篇文章让你认识React的Mobx!_第6张图片

 思路:

刚刚也说了只要是去改变数据状态,就可以用Mobx,也说了Mobx和React的各自分工,所以我们可以想到,去完成这样一个计数器的功能,我们要完成两部分工作:

store:自增的逻辑及数据的管理

React:事件的绑定及页面的渲染

下面我们开始完成:

1.store部分:

一篇文章让你认识React的Mobx!_第7张图片

2.连接React:

一篇文章让你认识React的Mobx!_第8张图片

 这样一个功能就结束了~大致的实现思路就是这个样子

5.加一个:Mobx里的计算属性

一篇文章让你认识React的Mobx!_第9张图片

 第三步其实可有可无,只是这样的话我们就可以一看到filterList就知道要用计算属性啦

6.Mobx的模块化:

前面的都是基础,在以后做项目必定是要模块化的:

一篇文章让你认识React的Mobx!_第10张图片

 步骤:

一篇文章让你认识React的Mobx!_第11张图片

关键:组合与拆分;useContext哎!这不是老熟人组件通信嘛

详细的拆分和组合可以去看原视频~ 

7.总结:

一篇文章让你认识React的Mobx!_第12张图片

你可能感兴趣的:(前端学习,react.js,前端,javascript)