Mobx通过回调处理设置状态的方法
问题描述:
我试图将使用set状态的现有应用程序转换为使用Mobx。我如何使用mobx实现设置状态回调功能。我是否需要使用componentDidUpdate来实现此功能?Mobx通过回调处理设置状态的方法
答
你是对的,因为你需要使用componentDidUpdate
来执行定制逻辑,当组件被重新渲染与MobX。可观察值将被同步更新,但组件将像往常一样异步重新渲染。
实施例(JSBin)
@observer
class App extends Component {
@observable value = ''
componentDidMount() {
setTimeout(() => this.value = 'focus', 1000);
}
componentDidUpdate() {
this.ref.focus();
}
render() {
return (
<input
ref={ref => this.ref = ref}
value={this.value}
onChange={e => this.value = e.target.value}
/>
);
}
};
谢谢,将尝试。 –
@Tholle我不认为你的陈述是完全正确的。即使'clicks'可观察值将具有更新(同步)值,DOM也不会被重新渲染。例如,如果由于可观察的值更改而导致DOM元素已从DOM中删除,则在点击处理程序中该值发生更改后,该DOM元素仍然存在。直到'componentDidUpdate'你能确定DOM已被更新。关于'setState'回调......“在应用更新后保证触发”,这意味着DOM将反映任何更改。 – Gobot
@Gobot你说得对。说实话,我忘了这个答案。我应该删除它。正如你所说,'componentDidUpdate'必须和MobX一起使用。 – Tholle