React Mobx状态管理工具的使用

2023年6月10日下午11:55 • JavaScript

React Mobx是一款流行的状态管理工具，通过简洁的语法和高效的性能，帮助开发者简化状态管理的难度。下面我将详细讲解React Mobx的使用步骤，希望对初学者和需要提高的开发者有所帮助。

一、环境准备

在学习React Mobx之前，需要在你的项目中安装和引入mobx和mobx-react两个依赖库。你可以使用npm安装依赖，命令如下：

npm install mobx mobx-react --save

同时，你需要使用ES6语法和装饰器(decorator)扩展，可以通过babel和webpack来实现。

二、配置装饰器

Mobx需要使用装饰器来标注需要被观察和更新状态的类和属性。如果你使用的是create-react-app创建的项目，需要在 .babelrc 文件中添加以下配置:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

然后你就可以在你的类和属性上直接使用装饰器了，例如：

import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

@observer
class Counter extends Component {
  @observable count = 0;

  handleClick = () => {
    this.count++;
  }

  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

export default Counter;

在上面的示例中，我们使用了 observable 装饰器来标注 count 属性，使其可以被观察和更新。同时，在类名上添加了 @observer 装饰器，使组件具有可观察状态并在状态变化时自动重新渲染。

三、使用示例

下面我们来看两个简单的示例，更加深入地了解React Mobx的使用方法。

示例一：计数器

import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

@observer
class Counter extends Component {
  @observable count = 0;

  handleClick = () => {
    this.count++;
  }

  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

export default Counter;

在这个示例中，我们使用 observable 装饰器来标注 count 属性，使其可以被观察和更新。同时，在类名上添加了 @observer 装饰器，使组件具有可观察状态并在状态变化时自动重新渲染。

当点击“+1”按钮时，handleClick() 方法会被触发，使 count 属性加一。这时候，Mobx会自动监测到 count 变化并更新组件的状态。

这个示例展示了一个简单的计数器，只要你点击一下按钮，计数器就会加一。当你多次点击按钮的时候，你也可以看到计数器的数字随之变化。

示例二：Todo list

import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

@observer
class TodoList extends Component {
  @observable todos = [];

  handleSubmit = (e) => {
    e.preventDefault();
    const text = this.input.value.trim();
    if (!text) {
      return;
    }
    this.todos.push({ text, completed: false });
    this.input.value = '';
  }

  handleToggle = (index) => {
    this.todos[index].completed = !this.todos[index].completed;
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input ref={(node) => { this.input = node; }} />
          <button type="submit">Add todo</button>
        </form>
        <ul>
          {this.todos.map((todo, index) => (
            <li key={index}>
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => this.handleToggle(index)}
              />
              {todo.text}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default TodoList;

在这个示例中，我们使用 observable 装饰器来标注 todos 数组，使其可以被观察和更新。同时，在类名上添加了 @observer 装饰器，使组件具有可观察状态并在状态变化时自动重新渲染。

在表单中添加一条新的todo时，handleSubmit() 方法将从输入框中提取文本并添加到 todos 数组中。当点击复选框时，handleToggle() 方法将会切换该todo项的 completed 属性。

这个示例展示了一个简单的待办事项列表。你可以在输入框中添加一个新的todo，或者勾选已存在的todo，以标记它们是否已完成。