• 1.mobx状态管理

      安装:creact-react-app mobx

      action、store、reducer。
      action是一个函数,事件调用actions直接修改state,Actions是唯一可以修改state的东西,并且可能有副作用,副作用是修改完之后,会激起一些计算属性的更新。
      state是可观测的(@observable),不能包含冗余或者推导数据,可以是数组啊,类啊,等等。
      Computed类似于vue中的计算属性。
      Reactions当观察的东西发生变化,就可以做一些事情。 在store里面去映射一个函数,这个函数会根据原有的值进行自动响应式的修改,返回一个新值。最后触发一个Reactions,类似于redux的subscribe,给reactions传两个函数,第一个函数是我检测的变量的列表,或者state列表,第二个函数就是要检测变化的回调函数,可以再去调Actions,做新的触发。
      因为store要返回全新的,所以适合用immitable。

      vueX

      action、mutation、state、component。
      它自动做了响应式处理,不像redux需要订阅。

      装饰器:@action和@observable增强原有的类或方法的能力,类似于高阶组件。
      1安装

      yarn add mobx

      2.observbale 把我们的数据源变成可观测的,数据实现响应。

      ES6的装饰器在react中有时不支持,要安装插件
      ()写法一:
      数组、对象、ES6中的map等都可以变成可观察的。
      例:写一个可观测的数组:const arr = observable (['a','b'])
      数值不可观察。
      如果想让数值变成可观察的,使用box()或get()、set()
      cosnt num = observable.box()
      num.value =
      ()写法二:必须要写在类中
      @observable
      const arr = ['a','b']
      import {observable} from "mobx" //可观察的
      export default()=>{
      const arr = observable(["a","b"]) //响应式
      const obj = observable({x:,y:})
      console.log(arr) //打印结果如下 略
      console.log(obj) //打印结果如下图2. 略
      console.log(Array.isArray(arr)) //打印true,证明还是数组。 return null
      }

      2.弹射

      目的:自己可以做深度的webpack配置。这个过程是不可逆的。
      控制台输出:yarn ejext

      3.安装支持装饰器的插件(typescript下的项目不需要装)
      yarn add babel-plugin-tranform-decorators-legacy(不一定行)

      4.decorators装饰器

      export default class Mobx extends Component{
      @observable
      arr = ['a','b'] //这时arr成为类里面的属性,就可以当成一个可观察的对象去引用了/
      render(){
      console.log(this.arr)
      return null
      } }

      5.(@)computed 计算属性,可以当作装饰器用,也可以当方法用。
      (1)computed作为函数。(写在render中)

      export default class Mobx extends Component{
      @observable
      name = "xinya"
      render(){
      cosnt otherName = computed(()=>{
      return this.name
      })
      otherName.observe((changeValue)=>{ //检测变量变化,changeValues是一个对象,里面有newValue和oldValue
      console.log(changeValue.newValue)
      })
      this.name = "kaiqin"
      return null
      } }

      (2)@computed 计算属性作为装饰器,必须在函数前面加get,它不需要调用,可以直接读取。

      export default class Mobx extends Component{
      @observable
      name = "xinya"
      @computed
      get otherName(){
      return this.name +"!!"
      }
      render(){
      autorun(()=>{ //会检测name变化,即使没有变化,也会打印一次。根据依赖值变化自动执行,不管有没有变化,刚开始都会执行一次。
      console.log(this.name+"!!")
      })
      setTimeOut(()=>{
      this.name = "kaiqin"
      this.otherName
      },) return null
      } }

      6.when只执行一次
      when有两个参数,都是回调函数,当第一个参数返回true的时候,第二个参数才会执行。

      7.Reaction 第二个回调函数的参数data,是第一个回调函数的返回值。
      第一个参数是函数,有返回值data。第二个参数也是一个函数,这个函数又有两个参数,第一个参数是前面的返回值data,第二个参数是reaction。
      和autorun的不同点是reaction第一次不执行,只有修改之后执行。

      reaction(()=>{
      return this.name
      },(data)=>{
      console.log(data) //shaojun
      })

      setTimeout(()=>{
      this.name = "shaojun"
      this.age =
      })

      8.@action 就是一个函数
      @computed
      get myJoin(){
      return this.name + this.age
      }
      @action
      printValue(){
      console.log(this.myJoin) //调用计算属性不用加括号
      }
      render(){
      setTimeOut(()=>{
      this.printValue()
      },100)
      }
      9.案例

      10.将mobx和react结合,使所有组件都被注入了store
      安装yarn add mobx-redux
      import {Provider } from "mobx-react"
      import {inject} from "mobx-react" //类似与connect
      @inject('store')
      <Provider store={store}>
      <Home>
      <Provider>
      //在自文件中

      runInAction
      可以跟踪值的变化

       
       
       
       
    • 凯琴
       
      10:25
      1.mobx状态管理
      安装:creact-react-app mobx

      action、store、reducer。

      action是一个函数,事件调用actions直接修改state,Actions是唯一可以修改state的东西,并且可能有副作用,副作用是修改完之后,会激起一些计算属性的更新。

      state是可观测的(@observable),不能包含冗余或者推导数据,可以是数组啊,类啊,等等。

      Computed类似于vue中的计算属性。

      Reactions当观察的东西发生变化,就可以做一些事情。

      在store里面去映射一个函数,这个函数会根据原有的值进行自动响应式的修改,返回一个新值。最后触发一个Reactions,类似于redux的subscribe,给reactions传两个函数,第一个函数是我检测的变量的列表,或者state列表,第二个函数就是要检测变化的回调函数,可以再去调Actions,做新的触发。

      因为store要返回全新的,所以适合用immitable。

      vueX
      action、mutation、state、component。
      它自动做了响应式处理,不像redux需要订阅。

      装饰器:@action和@observable增强原有的类或方法的能力,类似于高阶组件。

      1安装
       yarn add mobx

      2.observbale    把我们的数据源变成可观测的,数据实现响应。

      ES6的装饰器在react中有时不支持,要安装插件
      (1)写法一:
      数组、对象、ES6中的map等都可以变成可观察的。
      例:写一个可观测的数组:const arr = observable (['a','b'])
      数值不可观察。
      如果想让数值变成可观察的,使用box()或get()、set()
      cosnt num = observable.box(9)
      num.value = 10

      (2)写法二:必须要写在类中

      @observable
      const arr = ['a','b']

      import {observable} from "mobx"             //可观察的

      export default()=>{
          const arr  = observable(["a","b"])           //响应式
           const obj = observable({x:0,y:1})

      console.log(arr)     //打印结果如下 
           console.log(obj)     //打印结果如下图2.    
           console.log(Array.isArray(arr))          //打印true,证明还是数组。      
            
          return null
      }
      1.
      详情见ES6的proxy。
      2.

      2.弹射
      目的:自己可以做深度的webpack配置。这个过程是不可逆的。

      控制台输出:yarn ejext
      3.安装支持装饰器的插件(typescript下的项目不需要装)
      yarn add babel-plugin-tranform-decorators-legacy(不一定行)

      4.decorators装饰器

      export default class Mobx extends Component{
         @observable
          arr = ['a','b']                   //这时arr成为类里面的属性,就可以当成一个可观察的对象去引用了/
        render(){
           console.log(this.arr)
           return null
      }
         
      }

      5.(@)computed     计算属性,可以当作装饰器用,也可以当方法用。
      (1)computed作为函数。(写在render中)

      export default class Mobx extends Component{
         @observable
         name = "xinya"
         render(){
             cosnt otherName = computed(()=>{
                 return this.name
             })
             otherName.observe((changeValue)=>{     //检测变量变化,changeValues是一个对象,里面有newValue和oldValue
                    console.log(changeValue.newValue)
          })
           this.name = "kaiqin"
           return null
      }
         
      }
      (2)@computed   计算属性作为装饰器,必须在函数前面加get,它不需要调用,可以直接读取。

      export default class Mobx extends Component{
         @observable
         name = "xinya"

      @computed
         get otherName(){
            return this.name +"!!"
        }
        render(){
           autorun(()=>{         //会检测name变化,即使没有变化,也会打印一次。根据依赖值变化自动执行,不管有没有变化,刚开始都会执行一次。
              console.log(this.name+"!!")
         })
          setTimeOut(()=>{
              this.name = "kaiqin"
              this.otherName
      },1000)
          
           return null
      }
         
      }
      6.when只执行一次
      when有两个参数,都是回调函数,当第一个参数返回true的时候,第二个参数才会执行。

      7.Reaction   第二个回调函数的参数data,是第一个回调函数的返回值。

      第一个参数是函数,有返回值data。第二个参数也是一个函数,这个函数又有两个参数,第一个参数是前面的返回值data,第二个参数是reaction。
      和autorun的不同点是reaction第一次不执行,只有修改之后执行。

      reaction(()=>{
         return this.name
      },(data)=>{
         console.log(data)         //shaojun
      })

      setTimeout(()=>{
         this.name = "shaojun"
         this.age = 
      })

      8.@action  就是一个函数
      @computed
      get myJoin(){
          return this.name + this.age
      }

      @action
      printValue(){
        console.log(this.myJoin)        //调用计算属性不用加括号
      }

      render(){
        setTimeOut(()=>{
         this.printValue()
      },100)

      }

      9.案例

      10.将mobx和react结合,使所有组件都被注入了store
      安装yarn add mobx-redux

      import {Provider }  from "mobx-react"
      import {inject}  from "mobx-react"    //类似与connect

      @inject('store')
      <Provider store={store}>
          <Home>
      <Provider>
      //在自文件中

      runInAction
      可以跟踪值的变化

mobx使用的更多相关文章

  1. mobx @computed的解读

    写在前面:我一开始看不懂官网的@computed的作用,因为即使我把@computed去掉,依然能正确的report,然后我百度谷歌都找不到答案,下面都是我自己的理解,如果是有问题的,不对的,请务必留 ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. mobx源码解读3

    计算属性 function Todo() { this.id = Math.random() mobx.extendObservable(this, { aaa: 222, bbb: 11, ccc: ...

  4. mobx源码解读4

    这节介绍一下mobx的变动因子的稳定性. mobx整个系统是由ObservableValue, ComputedValue, Reaction这三个东西构建的 ObservableValue 是最小的 ...

  5. mobx源码解读2

    我们将上节用到的几个类的构造器列举一下吧: function Reaction(name, onInvalidate) { if (name === void 0) { name = "Re ...

  6. mobx源码解读1

    mobx是redux的代替品,其本身就是一个很好的MVVM框架.因此花点力气研究一下它. 网上下最新的2.75 function Todo() { this.id = Math.random() mo ...

  7. [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer

    Applications are driven by state. Many things, like the user interface, should always be consistent ...

  8. mobx react

    目录结构: Model/index.js 'use strict'; import { action, autorun, observable, computed } from "mobx& ...

  9. Mobx使用详解

    Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux. 本教程旨在介绍其用法及概念,并重点介绍其与Reac ...

  10. React框架 dva 和 mobx 的使用感受

    最近在用react写web项目,领导为了让前端便于维护要求都用react作为开发基础,框架选型不限.在使用 react 的时候或多或少会接触到状态管理,从开始学 react 到现在也挺久了,做一些前端 ...

随机推荐

  1. 在Linux上实现Python调用C语言函数

    一般思路 Python中内置ctypes库,需调用c编译成的.so文件来实现函数调用. 假设我们所需调用的c文件名为test.c,文件里有我们需要的函数func(x,y). 将.c文件编译成 .so文 ...

  2. 【VS开发】循序渐进学习使用WINPCAP(一)

    winpcap教程 中文教程 http://www.ferrisxu.com/WinPcap/html/index.html 除此之外, WinPcap · Developer Resources下载 ...

  3. Android基础内容提供者ContentProvider的使用详解(转)

    1.什么是ContentProvider 首先,ContentProvider(内容提供者)是android中的四大组件之一,但是在一般的开发中,可能使用的比较少. ContentProvider为不 ...

  4. python 并发编程 多线程 线程queue

    线程queue 线程之间已经是共享数据的,为什么还使用线程queue? 线程需要自己加锁,线程queue帮我们处理好加锁的问题 有三种不同的用法 第一种方法: class queue.Queue(ma ...

  5. FTP服务器的搭建(CentOS 7)

    注意ip地址为: 虚拟机ip设置 TYPE="Ethernet"BOOTPROTO="static"NAME="enp0s3"DEVICE= ...

  6. 从window 的cmd窗口中下载linux 服务器上文件

    下载linux 服务器上的文件 down.php 格式为  pscp linux服务器上用户名@linux 服务器ip  文件在windows系统上的绝对路径 如果是下载服务器上的某个目录,只要在ps ...

  7. shell基础#1

    shell:能直接调用命令(python)1.bash的基本特性 ctrl+L 清屏2.IO重定向与管道符 都由shell提供 命令是一个可执行的二进制程序3.编程基础 编程原理 程序:执行某个功能的 ...

  8. 使用CefSharp在.NET中嵌入Google kernel

    原文:使用CefSharp在.NET中嵌入Google kernel 使用CefSharp可以在.NET轻松的嵌入Html,不用担心WPF与Winform 控件与它的兼容性问题,CefSharp大部分 ...

  9. Jquery复习(六)之remove()易忘点和trigger()

    过滤被删除的元素 jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤. 该参数可以是任何 jQuery 选择器的语法. 下面的例子删除 class="italic ...

  10. c# 模拟post登录

    使用模拟登录大致可以分为两步 一.post登录获取cookis public CookieContainer GetCookie(string url,string account,string pa ...