mobx README

The project's README from github.com/mobxjs/mobx. As one markdown file: README.md.

logo

MobX

Simple, scalable state management.

npm version OpenCollective OpenCollective Discuss on Github Coverage Status View changelog

Documentation

Documentation can be found at mobx.js.org.

Sponsors

MobX is made possible by the generosity of the sponsors below, and many other individual backers. Sponsoring directly impacts the longevity of this project.

🥇🥇 Platinum sponsors ($5000+ total contribution): 🥇🥇


Guilded Canva Parallax

🥇 Gold sponsors ($2500+ total contribution):


One Beyond Frontend Masters Auction Frontier CodeFirst Modulz Coinbase Curology Mendix Facebook Open Source Casino Sites Bugsnag

🥈 Silver sponsors ($500+ total contributions):

mantro GmbH Extremely Heavy Industries Algolia Space307 Blokt UPPER DAZN talentplot EaseUS Route Planner and Route Optimizer Handsontable

Introduction

Anything that can be derived from the application state, should be. Automatically.

MobX is a signal based, battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming. The philosophy behind MobX is simple:

😙

Straightforward

Write minimalistic, boilerplate-free code that captures your intent. Trying to update a record field? Simply use a normal JavaScript assignment — the reactivity system will detect all your changes and propagate them out to where they are being used. No special tools are required when updating data in an asynchronous process.

🚅

Effortless optimal rendering

All changes to and uses of your data are tracked at runtime, building a dependency tree that captures all relations between state and output. This guarantees that computations that depend on your state, like React components, run only when strictly needed. There is no need to manually optimize components with error-prone and sub-optimal techniques like memoization and selectors.

🤹🏻‍♂️

Architectural freedom

MobX is unopinionated and allows you to manage your application state outside of any UI framework. This makes your code decoupled, portable, and above all, easily testable.

A quick example

So what does code that uses MobX look like?

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react-lite"

// Model the application state.
const myTimer = makeAutoObservable({
    secondsPassed: 0,
    increase() {
        this.secondsPassed += 1
    },
    reset() {
        this.secondsPassed = 0
    }
})

// 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)

The observer wrapper around the TimerView React component will automatically detect that rendering depends on the timer.secondsPassed observable, even though this relationship is not explicitly defined. The reactivity system will take care of re-rendering the component when precisely that field is updated in the future.

Every event (onClick / setInterval) invokes an action (myTimer.increase / myTimer.reset) that updates observable state (myTimer.secondsPassed). Changes in the observable state are propagated precisely to all computations and side effects (TimerView) that depend on the changes being made.

MobX unidirectional flow

This conceptual picture can be applied to the above example, or any other application using MobX.

Getting started

To learn about the core concepts of MobX using a larger example, check out The gist of MobX page, or take the 10 minute interactive introduction to MobX and React. The philosophy and benefits of the mental model provided by MobX are also described in great detail in the blog posts UI as an afterthought and How to decouple state and UI (a.k.a. you don’t need componentWillMount).

Further resources

The MobX book

The MobX Quick Start Guide ($24.99) by Pavan Podila and Michel Weststrate is available as an ebook, paperback, and on the O'Reilly platform (see preview).

Videos

Credits

MobX is inspired by reactive programming principles, which are for example used in spreadsheets. It is inspired by model–view–viewmodel frameworks like MeteorJS's Tracker, Knockout and Vue.js, but MobX brings transparent functional reactive programming (TFRP, a concept which is further explained in the MobX book) to the next level and provides a standalone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner.

A ton of credit goes to Mendix, for providing the flexibility and support to maintain MobX and the chance to prove the philosophy of MobX in a real, complex, performance critical applications.

mobx (mobxjs/mobx)

Searching Database…

28.2K ·GitHub
Mobx
Что это такое?MobX — это библиотека для управления состоянием в JavaScript-приложениях, которая автоматически обновляет всё, что вычисляется на основе состояния приложения, используя прозрачное функциональное реактивное программирование.
Это фреймворк или библиотека?Это библиотека, а не фреймворк. Она не навязывает структуру проекта и может управлять состоянием вне любого UI-фреймворка, хотя её обычно используют вместе с React.
Как добавить её в проект?Установите её через npm, оберните observable-состояние функцией 'observable', а реактивные компоненты — обёрткой 'observer', чтобы они автоматически обновлялись при изменении зависимостей.
Нужен ли мне React, чтобы её использовать?Нет, у самого MobX нет зависимостей, он работает самостоятельно. Привязки к React — лишь один из распространённых сценариев использования.
Нужно ли вручную оптимизировать перерисовку?Нет, MobX автоматически строит дерево зависимостей во время выполнения, поэтому перерисовываются только компоненты, которые действительно зависят от изменившегося состояния, без ручной мемоизации или селекторов.
Почему её называют библиотекой на основе сигналов?MobX отслеживает состояние во время выполнения и строит граф зависимостей, поэтому изменения точно и синхронно передаются только тем вычислениям и частям интерфейса, которые от них зависят. Это похоже на то, как пересчитываются формулы в электронных таблицах.
Что вдохновило на дизайн MobX?MobX опирается на принципы реактивного программирования, которые используются в электронных таблицах и MVVM-фреймворках, таких как Meteor's Tracker, Knockout и Vue.js. Библиотека реализует прозрачное функциональное реактивное программирование без промежуточных некорректных состояний и в синхронном режиме.
Где можно изучить MobX помимо README?Официальная документация находится на mobx.js.org. Также есть 10-минутное интерактивное руководство по React + MobX, курс на Egghead.io и платная книга MobX Quick Start Guide для более глубокого изучения.
What are similar projects?xstate, rxdb, vueuse, formily, pinia, redux, zustand, formik
Which topics is it in?reactive-programming, state-management, vue, react, npm, frontend, library, typescript, javascript, web
Creator
mobxjs
Size
22.4 MB
Stars
28.2K
Updated
CommitOct 13Release[email protected]Oct 02
Age
11y
Commits · 90 Days