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

MobX 是一个简单、可扩展的状态管理库，广泛应用于React应用程序中。它通过响应式的方式管理应用状态，并使数据与UI保持同步。这个示例展示了如何在React中使用MobX来管理状态，并展示了状态的自动更新以及组件如何响应状态的变化。

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

class CounterStore {
  // 创建可观察的状态
  @observable count = 0;

  constructor() {
    // 使状态可观察
    makeObservable(this);
  }

  // 定义修改状态的动作
  @action increment = () => {
    this.count++;
  };
}

const counterStore = new CounterStore();

@observer
class Counter extends Component {
  render() {
    return (
      <div>
        <h2>计数器：{counterStore.count}</h2>
        <button onClick={counterStore.increment}>增加</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

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