[2

MOBX是用于JavaScript应用程序的流行状态管理库，尤其是在React中。与Redux依赖于集中式商店和明确的行动派遣不同，MOBX采取了一种更具反应性的方法来管理状态。它通过跟踪依赖项并在状态更改时仅重新渲染应用程序的必要部分来自动更新您的应用程序的状态和UI。

在本指南中，我们将浏览MOBX的关键概念，如何使用React进行设置以及如何有效地将其用于您的React应用程序中的状态管理。

1。什么是mobx？

MOBX是一个状态管理库，该库利用

反应式编程

来管理应用程序的状态。它会自动跟踪和更新取决于状态的UI的各个部分，从而使其成为管理应用程序数据的非常高效，直观的方式。

---

mobx的关键功能：

自动依赖关系跟踪

：mobx自动跟踪应用程序的哪些部分取决于哪个状态。

简单和直觉

：使用MOBX，您无需手动派遣操作或更新状态。 MOBX对状态自动变化做出反应。

• ：mobx使用一种可观察的方法，将状态定义为，并且当状态更改时您的组件会自动重新呈现。
：MOBX仅更新依赖于已更改状态的组件，从而产生高度优化的性能。
• 2。 MOBX的核心概念 MOBX围绕着几个核心概念，这些核心概念共同管理状态：
• 1。可观察的状态
可观察状态是MOBX的核心。当对象被标记为

可观察

---

时，mobx跟踪该对象的状态，并自动更新依赖于它的组件。

例子：

可观察的装饰器使计数器对象被动。每当值更改时，使用此状态的任何React组件都会自动重新渲染。

2。操作

在MOBX中的操作是修改状态的函数。按照惯例，应使用操作来更新可观察的状态，因为MOBX确保以受控且可预测的方式更新状态。

例子：

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

从'mobx'导入{action}; const counter =可观察（{{ 值：0， 增量：action（function（）{函数{ 这个值； }）， 减少：action（function（）{ 这个值 - ; }）， }）;

的增量和减少方法是使用动作装饰器定义的动作。这些方法修改了状态。

3。计算值

计算值来自可观察的状态。当可观察的状态变化时，计算值会自动重新计算，以确保应用程序的状态保持一致。

例子：

import { action } from 'mobx';

const counter = observable({
  value: 0,
  increment: action(function () {
    this.value  ;
  }),
  decrement: action(function () {
    this.value--;
  }),
});

• 双重值是从可观察的值得出的计算值。每当价值变化时，都会重新计算双重价值。

4。反应

反应是每当可观察值变化时运行的副作用。反应对于基于状态更改触发操作很有用。

例子：

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

autorun函数是一种反应，每当反击更改时自动运行。它将更新的计数器值记录到控制台。

3。将MOBX与React 集成

MOBX与反应无缝集成以管理您的应用程序的状态。在React中，MOBX通过使用

观察者

更高级组件来跟踪状态更改并在必要时自动更新UI。

要在React应用程序中使用MOBX，您需要安装MOBX和MOBX-REACT：

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

NPM安装mobx mobx-react

步骤2：创建一个可观察的商店

---

创建一个持有您应用程序状态的商店。该商店将是可以观察到的，并且组件可以对其更改做出反应。

例子：

从'mobx'导入{observable，action}; 班级柜台{ @observable值= 0; @Action递增（）{ 这个值； } @Action dewment（）{ 这个值 - ; } } 导出cont counterStore = new CounterStore（）;

counterstore类定义可观察的状态（值）和操作（增量和减少）。

npm install mobx mobx-react

例子：

从“ react”导入react; 从'mobx-react'导入{observer}; 从'./counterstore'导入{counterStore}; const counter =观察者（（）=> { 返回 （ ）； }）; 导出默认计数器；

与观察者包裹了计数器组件，这使其对柜台的变化做出反应。当counterStore.Value更改时，React会自动重新呈现组件以反映新值。

步骤4：在您的应用程序中使用商店

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

现在已经设置了您的商店并且您的组件已被观察器包装，您可以在应用程序中使用商店：

从“ react”导入react; 从'react-dom'导入{Render}; 从“ mobx-react”导入{提供者}; 从'./counter'导入计数器； 从'./counterstore'导入{counterStore}; const app =（）=>（ ）； 渲染（，document.getElementById（'root'））;

提供者

用于将存储注入应用程序。计数器组件现在可以直接访问柜台。

4。使用mobx

import React from 'react';
import { observer } from 'mobx-react';
import { counterStore } from './CounterStore';

const Counter = observer(() => {
  return (
    

      
Count: {counterStore.value}
       counterStore.increment()}>Increment
       counterStore.decrement()}>Decrement
    
  );
});

export default Counter;

• 1。简单

MOBX使管理状态很容易，减少了在Redux（例如Redux）中常见的样板和复杂性。

2。自动重新渲染

当状态发生变化时，MOBX会自动处理取决于该状态的组件的重新渲染。

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import Counter from './Counter';
import { counterStore } from './CounterStore';

const App = () => (
  
    
  
);

render(, document.getElementById('root'));

3。细粒度可观察性

• MOBX确保在状态更改时仅重新渲染必要的组件，改善性能。
4。声明状态管理

---

使用MOBX声明地管理状态。您只需要定义状态应如何行为，而MOBX处理其余的。

5。结论

MOBX是一个强大而有效的状态管理库，使用反应性编程原理。借助其简单的设置和自动状态跟踪，它使React应用程序中的管理状态变得更加容易。 MOBX对于需要对更新和性能优化进行细粒度控制的应用程序尤其有益。

如果您正在构建复杂的React应用程序，并且想要易于理解的状态管理解决方案，则MOBX是一个绝佳的选择。它是直观的，强大的，并且与反应无缝地工作以提供优化的开发体验。