mobx react_带有React Native的MobX，已简化

mobx react

State management is the core of any React application and as React is just a UI library, we need something to take care of the state of our app. State management can become troublesome and it is easy to create unmanageable React applications because of inconsistent state.

状态管理是任何React应用程序的核心，并且由于React只是一个UI库，我们需要一些东西来照顾我们应用程序的状态。 状态管理可能会变得麻烦，并且由于状态不一致，很容易创建无法管理的React应用程序。

In this article, we will learn about how to use MobX as our state management solution in a React Native application.

在本文中，我们将学习如何将MobX用作React Native应用程序中的状态管理解决方案。

什么是国家管理？ (What is State Management?)

A State is just the data that your app is dealing with. State saves the data that a component requires and it influences how the component gets rendered. State management is the process of managing that data. Monitoring and retrieving data in a particular app can be difficult and that’s where state management libraries come to the rescue. There are multiple ways to manage states like using Redux or the React Context API, but here we’ll cover MobX.

状态只是您的应用程序正在处理的数据。 状态保存组件所需的数据，它会影响组件的呈现方式。 状态管理是管理该数据的过程。 监视和检索特定应用程序中的数据可能很困难，因此状态管理库可助您一臂之力。 有多种方法可以管理状态，例如使用Redux或React Context API ，但是在这里我们将介绍MobX 。

什么是MobX？ (What is MobX?)

MobX is a state management library that can be used with any JavaScript framework. React and MobX are powerful together and work as a complete framework. MobX provides the mechanism to store and update the application state that React Native then uses to render the components. The Philosophy behind MobX is: *“Anything that can be derived from the application state, should be derived. Automatically.”*

MobX是一种状态管理库，可以与任何JavaScript框架一起使用。 React和MobX强大在一起，可以作为一个完整的框架工作。 MobX提供了一种机制来存储和更新React Native随后用来渲染组件的应用程序状态。 MobX背后的理念是：*“应该从应用程序状态派生出任何东西。 自动。” *

核心理念 (Core concept)

Derivations form the backbone of MobX which enables us to discard the repeated state. The idea is to:

派生形成MobX的主干，这使我们能够丢弃重复的状态。 这个想法是：

Find minimal state (observable state), derive everything (derived state) and never turn the state into more state.

查找最小状态(可观察状态)，派生一切(派生状态)，并且永远不要将状态变成更多状态。

MobX at its core has three important concepts: Observables, Actions, and Reactions. A Store contains these three which then is used by the React Native application.

MobX的核心是三个重要概念： Observables ， Actions和Reactions 。 商店包含这三个，然后由React Native应用程序使用。

可观察的 (Observables)

Observables with MobX are just containers that hold the core state of our application. The idea is to make an object able to emit new changes to which the observer can react. You can achieve this with the @observable decorator. Let’s imagine we have a variable named count that changes over time. We can make it observable simply by:

MobX的可观察对象仅仅是保持我们应用程序核心状态的容器。 这样做的目的是使对象能够发出观察者可以做出React的新变化。 您可以使用@observable装饰器来实现。 假设我们有一个名为count的变量，该变量会随时间变化。 我们可以通过以下方式使其变得可观察：

// import observable from mobx
import { observable } from "mobx";

//create a store with count observable
class Store {
  @observable
  count = 0;
}

//export Store
export default new Store();

计算的可观察物 (Computed Observables)

Remember the principle of MobX, *“Find minimal state (observable state), derive everything (derived state)”*. The values that can be derived from already defined observables are computed values. MobX avoids inconsistency of state by discouraging the creation of more states.