Mobx4 概述

Mobx 通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单可扩展。

Mobx 哲学:任何源自应用状态的东西都应该自动得获得。

React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染;Mobx 提供机制来存储和更新应用状态供 React 使用。

Mobx 机制介绍

Action

事件调用 Action。Action 是唯一可以修改 State 的东西,并可以有其他副作用。

1
2
3
@action onClick=()=>{
this.props.todo.done=true;
}

State

State 是可观察和最低限度定义的。不应包含冗余或推导数据。可以是图形,包含类、数组、引用等。

1
2
3
4
@observable todos=[{
title:"learn mobx",
done:false
}]

Computed Values

Computed Values 是可以使用纯函数从 State 中导出的值。

Mobx 会自动更新它,并在它不再使用时将其优化掉。

1
2
3
4
5
@computed get completedTodos(){
return this.todos.filter(
todo=>todo.done
)
}

Reactions

Reactions 很像 Computed Values,会对 State 的变化做出反应。但它不产生一个值,而是会产生一些副作用(如更新 UI)。

1
2
3
4
5
const Todos=observer({todos}=>
<ul>
todos.map(todo=><TodoView />)
</ul>
)