MobX

MobX是一个基于响应式数据管理的状态管理库，和React结合使用时可以方便地管理应用中的状态。它的主要特点是简单易用和高效性，可以帮助我们轻松地处理复杂的数据流。

特点

• 简单可扩展的数据管理机制
• 响应式的数据流
• 高效、自动化的更新机制
• 兼容React和Angular

安装

使用npm安装MobX：

npm install mobx --save

使用yarn安装MobX：

yarn add mobx

起步

1. 创建一个Store

使用MobX创建一个数据管理器，通常我们会将它命名为Store。它必须包含一个可观察的状态和一些管理状态的方法，比如actions。

import { observable, action } from 'mobx';

class TodoStore {
  @observable todos = [];
  
  @action addTodo = (todo) => {
    this.todos.push(todo);
  }
}

在这个例子中，我们创建了一个名为TodoStore的类，它有一个可观察的状态成员变量todos和一个添加任务的action。

2. 实例化Store

我们需要先创建TodoStore的实例：

const todoStore = new TodoStore();

3. 绑定Store

我们可以使用Provider组件将TodoStore绑定到React组件树中：

import React from 'react';
import { Provider } from 'mobx-react';
import App from './App';
import { todoStore } from './stores/TodoStore';

ReactDOM.render(
    <Provider todoStore={todoStore}>
        <App />
    </Provider>,
    document.getElementById('root')
);

4. 使用Store

我们可以在React组件中使用绑定过的store：

import { inject, observer } from 'mobx-react';

@inject('todoStore')
@observer
class TodoList extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    const task = this.taskInput.value;
    this.props.todoStore.addTask(task);
    this.taskInput.value = '';
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref={(input) => this.taskInput = input} />
          <button>Add</button>
        </form>
        <ul>
          {this.props.todoStore.todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
      </div>
    );
  }
}

在这个例子中，我们使用inject和observer装饰器将TodoList组件绑定到TodoStore，然后我们可以在组件中使用store中的状态和方法。

结语

以上是MobX的简单介绍和使用方法，希望能对你有所帮助！