问题描述
React 实际上是难以置信的难 T_T....
我只想在状态发生变化时调用组件方法。我可以使用 Vue 中的观察者轻松做到这一点。但是我应该在 React 类组件和 MobX 的自动运行中做什么?这会在功能组件中工作吗?
import someStore
@observer
class MyComponent {
constructor(){
autorun(
// references someStore.someObservable
// call component methods
// but this isn't hit when there's change
)
}
}
解决方法
我为您制作了 2 个示例,一个是类组件,不再推荐使用这种方式来做事,另一个是功能组件。
示例相当升级,因为在渲染中计算我们的 status
会容易得多,但让我们假设我们不能这样做并且我们想要调用一些内部方法。
首先,我们设置存储并每秒更新一次:
import { observable,reaction } from 'mobx';
import { observer } from 'mobx-react';
import React,{ useEffect,useState } from 'react';
const store = observable({
counter: 0
});
setInterval(() => {
store.counter++;
},1000);
// Helper method
const getStatus = (number) => (number % 2 === 0 ? 'even' : 'odd');
这是我们的功能组件,我们使用 useEffect
对计数器更改做出反应,然后使用 setStatus
方法更新我们的内部状态:
const CounterFunctional = observer(() => {
const [status,setStatus] = useState(() => getStatus(store.counter));
useEffect(() => {
setStatus(getStatus(store.counter));
},[store.counter]);
return <div>functional: {status}</div>;
});
这是我们的类组件,现在我们使用 MobX reaction
(不要忘记在卸载时处理它)并在 counter
更改后类似地更新我们的内部状态:
const CounterClass = observer(
class extends React.Component {
disposer;
constructor() {
super();
this.state = {
status: getStatus(store.counter)
};
}
componentDidMount() {
this.disposer = reaction(
() => store.counter,() => {
this.setState({
status: getStatus(store.counter)
});
}
);
}
componentWillUnmount() {
this.disposer();
}
render() {
return <div>class: {this.state.status}</div>;
}
}
);
希望它是有道理的,React 实际上是一个超级简单的库 :)
代码沙盒:https://codesandbox.io/s/httpsstackoverflowcomquestions66602050-7uhm6