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

本文通过一个基于React的示例展示了如何使用MobX进行状态管理，包括状态定义、观察和修改。同时提供了常见的技术解答，涉及MobX的版本更新和React组件的优化。

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

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

  constructor() {
    makeObservable(this);
  }

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

const counterStore = new CounterStore();

// 使用mobx-react连接React组件和状态
@observer
class Counter extends Component {
  render() {
    return (
      <div>
        <p>Count: {counterStore.count}</p>
        <button onClick={() => counterStore.increment()}>Increment</button>
      </div>
    );
  }
}

export default Counter;

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