基于MobX的React状态管理示例和技术解答

本示例展示了如何使用MobX进行React状态管理，实现响应式数据流，以及常见问题的技术解答。

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

// 创建Store
class CounterStore {
  @observable count = 0;

  constructor() {
    makeObservable(this);
  }

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

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

const counterStore = new CounterStore();

// 创建Observer组件
@observer
class CounterComponent extends Component {
  render() {
    return (
      <div>
        <p>Count: {counterStore.count}</p>
        <button onClick={() => counterStore.increment()}>Increment</button>
        <button onClick={() => counterStore.decrement()}>Decrement</button>
      </div>
    );
  }
}

// 在应用中使用CounterComponent

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