How to connect state to props with mobx.js @observer when use ES6 class?

在使用ES6类与MobX进行React开发时，observer 函数是一个非常重要的部分，它用于将React组件转变为响应式组件，从而使组件能够观察MobX中的状态变化，并在状态更新时重新渲染。这里是如何具体操作的：

步骤1：安装mobx 和 mobx-react

首先，确保你的项目中安装了mobx和mobx-react。如果还未安装，可以通过npm或yarn进行安装：

bash
npm install mobx mobx-react
# 或者
yarn add mobx mobx-react

步骤2：创建MobX Store

创建一个MobX store来管理你的应用状态。例如，我们创建一个简单的计数器store：

javascript
import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

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

const counterStore = new CounterStore();
export default counterStore;

步骤3：使用ES6类创建React组件

创建一个React组件，并使用observer函数从mobx-react包装这个组件：

javascript
import React from 'react';
import { observer } from 'mobx-react';
import counterStore from './CounterStore';

@observer // 使用装饰器来应用observer
class Counter extends React.Component {
  render() {
    return (
      <div>
        <h1>Count: {counterStore.count}</h1>
        <button onClick={() => counterStore.increment()}>Increment</button>
        <button onClick={() => counterStore.decrement()}>Decrement</button>
      </div>
    );
  }
}

export default Counter;

注意：

• 使用observer将React组件变成响应式，这意味着任何访问到的被观察的MobX状态变化都会引起组件的重新渲染。
• 在上面的例子中，我们直接从Store导入状态并在组件中使用，这适用于简单或中等复杂度的应用。对于更复杂的应用，你可能需要考虑使用Context或其他状态管理解决方案来传递store。

通过上面的步骤，你可以把MobX的状态通过observer高阶组件连接到React的props，并使得组件能够响应状态变化。这是实现React组件和MobX状态管理结合的常见模式。