mobx与react/ReactNative 的用法自学整理

mobx与react/ReactNative 的用法自学整理

官方文档说：MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

任何源自应用状态的东西都应该自动地获得。其中包括UI、数据序列化、服务器通讯，等等。

React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

对于应用开发中的常见问题，React 和 MobX都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制， 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。

MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且

其实mobx的模式是类MVVM 怎么说呢 就是用法是是双向数据绑定的用法但是底层还是单向数据流(个人认为)

安装：

npm install mobx mobx-react --save

安装babel插件 用于支持ES7的decorator(装饰)特性

npm install babel-plugin-transform-decorators-legacy babel-react-native-stage-0 --save-dev

现在，创建一个 .babelrc 文件配置 babel 插件：

{ 'presets': ['react-native'], 'plugins': ['transform-decorators-legacy']}

引入：

import {observable,autorun} from 'mobx'

import {observer} from 'mobx-react/react'

因为我们编写的是一个自定义 .babelrc 文件，所有只需要 react-native 的 preset。配置 react-native 的 preset，还有指定一些先期运行的插件（我们这里是 transform-decorators-legacy 插件）。

首先说一下mobx载react-native中的思路

主要用到的是@observable、@observer、@computed、@action（几乎很少用）

他们之间的关系和用法：

我刚开始的时候也是一头雾水 因为我不知道什么是Radus、也不知道MOBX但是由于项目需要(我工作一年几乎都没有算入门....这是悲哀啊)

这里用es6

当你创建一个class组件时在前面加上@observer (观察者)

在组件中定义一个使用 @observable 去监听一个数值(这个数据可以数字、字符串、数组、对象等类型)

当你监听的数值发生变化时 就会触发 @observer所观察的组件的render方法实现页面重新渲染 实现数据更新

@computed是可以根据你的需求动态的去计算 什么时候需要更新什么时候不需要更新

@action 是当你监听的多个数据发生变化时可以统一放在action({})中去处理 当action中的数据全部变化完以后再调用render方法 一次更新 (这里是相当于一个优化)

https://www.jianshu.com/p/505d9d9fe36a (这里写的非常详细，大赞)

选取部分代码如下：

class MyState {

@observable num1 = 0;

@observable num2 = 100;

@action addNum1 = () => { this.num1 ++; };

@action addNum2 = () => { this.num2 ++; };

@computed get total() { return this.num1 + this.num2; }

const newState = new MyState();

const AllNum = observer((props) => <div>num1 + num2 = {props.store.total}</div>);

const Main = observer((props) => (

<div>

<p>num1 = {props.store.num1}</p>

<p>num2 = {props.store.num2}</p>

<div>

<button onClick={props.store.addNum1}>num1 + 1</button>

<button onClick={props.store.addNum2}>num2 + 1</button>

</div>

</div>));

@observerexport default class App extends React.Component {

render() {

return (

<div>

<Main store={newState} />

<AllNum store={newState} />

</div>

);

}}