前言
从今天开始我们来搞搞状态管理可否，这几天没怎么写博客，因为被病魔战胜了，tmd，突然的降温让我不知所措，大家最近注意安全，毕竟年底了，查的严，呸，大家注意保暖
特别声明：写该文只是写一下用MobX的思路，有很多地方我会直接放官网链接，因为官网已经写的够详细了
首先来个比较简单的，MobX。
引用官网上的一句话：
MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming – TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:
MobX 是一款精准的状态管理工
在React Native中，状态管理是构建复杂应用的关键部分。本文主要介绍如何使用MobX这一流行的、简化状态管理的库。MobX通过透明的函数响应式编程（TFRP）使状态管理变得简单和可扩展。它的核心理念是任何依赖于应用状态的东西都应自动更新，包括UI、数据序列化和服务器通信。
我们需要了解如何设置环境。在React Native项目中，特别是使用TypeScript的情况下，因为默认不支持装饰器语法，我们需要额外配置。你可以选择在现有环境中启用装饰器支持，或者使用MobX提供的`decorate`工具。官方文档提供了详细的配置指南，可以参考以解决这个问题。
接下来，我们通过一个简单的例子来理解MobX的用法。在状态管理中，通常会创建一个或多个仓库（store）来存储和管理数据。例如，我们有`home.tsx`和`list.tsx`两个仓库：
1. `home.tsx` 仓库定义了一个`isShowMap`布尔值，使用`@observable`装饰器使其可观察。当这个值改变时，关联的UI将自动更新。同时，`@action`装饰器用于标记修改状态的方法，确保这些操作被追踪，以便进行时间旅行调试。
```typescript
import { observable, action } from 'mobx';
class List {
@observable isShowMap = false;
@action
switchTab(info: boolean) {
this.isShowMap = info;
}
export default new List();
```
2. `list.tsx` 仓库则包含一个`listData`数组，同样使用`@observable`。它还定义了一个`@action`方法`getListData`，负责从远程API获取数据，并使用`runInAction`包裹赋值操作，以确保在异步操作后更新状态。
```typescript
import { observable, action, runInAction } from 'mobx';
class List {
@observable listData: Array<any> = [];
@action
getListData() {
fetch('https://ik9hkddr.qcloud.la/mock/cookbook-list.json')
.then(response => response.json())
.then(result => {
runInAction(() => {
this.listData = result.data;
});
});
}
export default new List();
```
在`index.js`中，我们将两个仓库合并到一个全局的`store`对象中，并使用`Provider`组件将`store`注入到React组件树的根部。这样，所有子组件都可以通过`@inject`和`@observer`装饰器访问和监听状态变化。
```jsx
import React from 'react';
import { Provider } from 'mobx-react';
import Home from './pages/home/Home';
import HotList from './pages/hotlist/HotList';
import store from './store';
export default class componentName extends React.Component {
render() {
return (
<Provider store={store}>
<Home />
<HotList />
</Provider>
);
}
}
```
在这个例子中，我们看到了如何在React Native应用中使用MobX来管理状态。`@observable`使得数据变化可追踪，`@action`确保状态的改变是可控的，而`Provider`和`@inject`则允许组件间共享和响应状态变化。通过这种方式，我们可以构建出高效、易于维护的React Native应用。MobX的简洁性和强大的功能使其成为React开发者管理状态的理想选择。
