可以定义像的东西observable，computed并action在TodoStore使用makeObservable作为decorators目前不被优选的（装饰器是目前不是ES标准，和标准化的过程花费很长的时间）：

都多商店：

import { observable, autorun, computed, makeObservable, action } from "mobx";

class TodoStore {
  names = ["p1", "p2", "p3"];
  filter = "";

  constructor() {
    makeObservable(this, {
      names: observable,
      filter: observable,
      filterredValue: computed,
      setFilter: action,
    });
    autorun(() => {
      console.log(this.filter);
      console.log(this.names);
    });
  }

  get filterredValue() {
    return this.names.filter((word) => word.includes(this.filter));
  }

  setFilter(filter) {
    this.filter = filter;
  }
}

export const todoStore = new TodoStore();

并且，这里是App组件使用observer（一个高阶组件，它使基于函数或类的 React 组件在可观察值发生变化时重新渲染）：

应用程序：

import { observer } from "mobx-react";
import { Component } from "react";

class App extends Component<any> {
  setName = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.props.store.setFilter(e.target.value);
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          {this.props.store.filterredValue.map((name) => (
            <li key={name}>{name}</li>
          ))}
          <input onChange={(e) => this.setName(e)} />
        </header>
      </div>
    );
  }
}

export default observer(App);

演示：

首先，您需要将每个使用observable状态的组件包装到observer装饰器中，如下所示：

import {observer} from 'mobx-react'

@observer
class App extends React.Component {
  // ...
}

// or if you are using functional components:

const App = observer(() => {
  // ...
})

此外，如果您使用的是 MobX 版本 6，则需要makeObservable在类构造函数中添加调用：

import {observable, action, autorun, computed, makeObservable} from 'mobx'

class TodosStore {
    @observable names = ["p1", "p2", "p3"]
    @observable filter = ""

    constructor() {
       makeObservable(this);
    }

    @action
    get filterredValue(){
        return store.names.filter(word => word.includes(this.filter))
    }
}

文档中有关 MobX 和 React 集成的更多信息

将shouldComponentUpdate添加到您的组件中。使其在状态更改时返回 true。

您应该设置name和value到您的输入。

   <input name="" value="" onChange={(e) => this.setName(e)} />