MobX All In One

Simple, scalable state management.

https://mobx.js.org/README.html

https://github.com/mobxjs/mobx

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react" // Model the application state.
class Timer {
secondsPassed = 0 constructor() {
makeAutoObservable(this)
} increase() {
this.secondsPassed += 1
} reset() {
this.secondsPassed = 0
}
} const myTimer = new Timer() // Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
<button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
)) ReactDOM.render(<TimerView timer={myTimer} />, document.body) // Update the 'Seconds passed: X' text every second.
setInterval(() => {
myTimer.increase()
}, 1000)

Tutorials

https://mobx.js.org/getting-started



refs

函数响应式编程 === 函数式编程 + 响应式编程

https://cn.mobx.js.org/



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


MobX All In One的更多相关文章

  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. XV6学习(2)Lab syscall

    实验的代码放在了Github上. 第二个实验是Lab: system calls. 这个实验主要就是自己实现几个简单的系统调用并添加到XV6中. XV6系统调用 添加系统调用主要有以下几步: 在use ...

  2. django 请求处理流程 链路追踪

    class BaseMiddleware: # https://github.com/django/django/blob/master/tests/utils_tests/test_decorato ...

  3. Defining Go Modules

    research!rsc: Go & Versioning https://research.swtch.com/vgo shawn@a:~/gokit/tmp$ go get --helpu ...

  4. xftp 提示无法显示远程文件夹

    在用xftp远程服务器,打开文件夹的时候一直提示"无法显示远程文件夹" 解决方案: 1.网上大多解决方案是文件->属性->选项->将使用被动模式选项去掉即可 2. ...

  5. 通过Knockd隐藏SSH,让黑客看不见你的服务器

    出品|MS08067实验室(www.ms08067.com) 本文作者:大方子(Ms08067实验室核心成员) 0X01设备信息   Ubuntu14.04:192.168.61.135   Kali ...

  6. 客户端负载均衡Ribbon

    客户端负载均衡Ribbon 一.Ribbon是什么 二.Ribbon实现客户端负载均衡 三.Ribbon负载均衡策略 四.Rest请求模板类解读 4.1 RestTemplate的GET请求 第一种: ...

  7. linux系统磁盘管理(磁盘阵列)

    1.磁盘阵列简介 RAID(Redundant Array of Independent Disks)即独立硬盘冗余阵列,简称磁盘阵列.磁盘阵列是由很多价格较便宜的磁盘,以硬件(RAID卡)或软件(M ...

  8. php之bindValue和bindParam的区别

    PDOStatement::bindValue -  把一个值绑定到一个参数 绑定一个值到用作预处理的 SQL 语句中的对应命名占位符或问号占位符. PDOStatement::bindParam - ...

  9. Pytest(11)allure报告

    前言 allure是一个report框架,支持java的Junit/testng等框架,当然也可以支持python的pytest框架,也可以集成到Jenkins上展示高大上的报告界面. mac环境: ...

  10. AtCoder Beginner Contest 168

    比赛链接:https://atcoder.jp/contests/abc168/tasks A - ∴ (Therefore) 题意 给出一个由数字组成的字符串 $s$,要求如下: 如果 $s$ 以 ...