你可以定义类似的东西observable
, computed
and action
in TodoStore
using makeObservable https://mobx.js.org/observable-state.html#makeobservable as decorators https://mobx.js.org/enabling-decorators.html#enabling-decorators-目前是not被优先考虑(装饰器目前还不是 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 https://mobx.js.org/api.html#observer(一个高阶组件,当可观察值发生变化时,它使基于函数或类的 React 组件重新渲染):
App:
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);
Demo: