React + MobX6实战之旅：从入门到进阶

2023-09-07 17:36:41

React + MobX6：React 状态管理的动态组合

在React生态系统中，状态管理一直是一个关键挑战，而MobX6作为轻量级反应式库的崛起，提供了应对复杂应用程序的优雅解决方案。本文将深入探讨React + MobX6的强大功能，引导你踏上实战之旅，掌控应用程序状态。

MobX6：基于观察者的状态管理

MobX6的核心基于观察者模式，采用响应式数据结构（Observables）和计算属性（Computed Values）来管理状态。Observables本质上是可观察的变量，当其值发生变化时，MobX6会自动通知所有相关观察者，触发更新。

从入门到实践

1. 安装MobX6

npm install --save mobx

2. 创建Store

Store是MobX6中存储和管理状态的核心概念。它可以包含多个Observables和Computed Values。例如：

import { observable } from 'mobx';

class CounterStore {
  @observable count = 0;
}

3. 注入Store

利用React Hooks，你可以将Store注入到React组件中，让组件访问Store中的状态并触发更新。

import React, { useContext } from 'react';
import { CounterStoreContext } from './CounterStore';

const Counter = () => {
  const store = useContext(CounterStoreContext);

  return (
    <>
      <p>Count: {store.count}</p>
      <button onClick={() => store.count++}>+</button>
    </>
  );
};

4. 响应式更新

MobX6自动检测Observables的变化并触发相应的更新。这意味着，当Store中的状态发生改变时，UI会自动更新。

实战案例

1. 计数器案例

一个简单的计数器应用程序演示了MobX6如何管理基本状态。使用Observables和Actions，可以实现一个可递增/递减的计数器。

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action
  increment() {
    this.count++;
  }

  @action
  decrement() {
    this.count--;
  }
}

2. TodoList 案例

一个更复杂的TodoList应用程序展示了MobX6的更高级特性。通过使用Observables、Computed Values和Actions，可以创建一个能够添加、删除和标记完成任务的TodoList。

import { observable, computed, action } from 'mobx';

class TodoStore {
  @observable todos = [];

  @computed
  get completedTodos() {
    return this.todos.filter(todo => todo.completed);
  }

  @action
  addTodo(text) {
    this.todos.push({ text, completed: false });
  }

  @action
  removeTodo(todo) {
    this.todos = this.todos.filter(t => t !== todo);
  }

  @action
  toggleTodo(todo) {
    todo.completed = !todo.completed;
  }
}