MobX 状态管理库的React示例及技术解答

本示例演示了如何在React应用中使用MobX进行状态管理。MobX是一款简单、可扩展的状态管理库，使得状态与React组件之间的关系更加直观。通过实时响应状态的变化，MobX能够简化应用的复杂性。

import React from 'react';
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

// 定义一个可观察的状态
class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  // 增加计数
  increment() {
    this.count++;
  }

  // 减少计数
  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();

// React组件
const CounterComponent = observer(() => {
  return (
    <div>
      <p>当前计数: {counterStore.count}</p>
      <button onClick={() => counterStore.increment()}>增加</button>
      <button onClick={() => counterStore.decrement()}>减少</button>
    </div>
  );
});

// 在应用中使用组件
function App() {
  return <CounterComponent />;
}

export default App;

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com