• 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. 17.DRX操作时序

    DRX状态转移 OnDuration:监听态,监听并接收PDCCH,也叫激活态 StayActive:保持激活状态(做完业务后,继续监听一段时间和一个非激活定时器时间,或者还有缓存) off:off状 ...

  2. https原理以及golang基本实现

    关于https 背景知识 密码学的一些基本知识 大致上分为两类,基于key的加密算法与不基于key的加密算法.现在的算法基本都是基于key的,key就以一串随机数数,更换了key之后,算法还可以继续使 ...

  3. 使用new关键字创建对象数组(C#,C++,Java)

    今天遇到一个题目 分析下面的代码,判断代码是否有误. using System; namespace Test1 { class Point { public int x; public int y; ...

  4. 【转】MySQL-Utilities,mysql工具包

    原文:https://blog.csdn.net/leshami/article/details/52795777 MySQL Utilities 是一组基于python语言编写的python库的命令 ...

  5. Spring(七)--Spring JDBC

    Spring JDBC 1.需要的实体类和数据库 2.需要的dao层 package com.xdf.dao; import com.xdf.bean.Student; import org.spri ...

  6. py3 base64加密

    import base64 #字符串编码: encodestr = base64.b64encode('abcr34r344r'.encode('utf-8')) print(str(encodest ...

  7. 【BZOJ-4289】Tax 最短路 + 技巧建图(化边为点)

    题意 给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是进入终点的边的边权N<=10 ...

  8. 如何把maven文件pom.xml中的java包下载下来

    右击pom.xml文件,选择Run As-->Maven build- 在打开的页面中,如图输入"dependency:copy-dependencies",后点击" ...

  9. Docker之rm: Device or resource busy

    docker 容器里 rm -rf /data 提示: rm: cannot remove ‘/data’: Device or resource busy 原因: 在建立容器的时候做了相应目录的挂载 ...

  10. Qualcomm_Mobile_OpenCL.pdf 翻译-7 内存性能优化

    内存优化是最重要也是最有效的OpenCL性能优化技术.大量的应用程序是内存限制而不是计算限制.所以,掌握内存优化的方法是OpenCL优化的基础.在这章中,将会回顾OpenCL的内存模型,然后是最优的实 ...