从Redux切换到MobX for React后,我开始非常喜欢MobX.这太棒了.
如果在渲染中未使用提供的商店observable,则MobX具有某种行为,它不会更新组件.我认为通常这是一个非常好的行为,只有在实际发生了变化时才会使组件呈现.
但是......我确实遇到过几种我不想要或者需要在渲染方法中使用MobX observable的情况,在这种情况下我this.props.store的MobX存储不会更新.
在这种情况下,作为一种解决方法,我只是在render方法中引用observable,但我认为这不是一个非常干净的方法,我想知道是否有更简洁的方法来做到这一点?
这个组件代码应该更多地解释我正在询问的内容.它是一个基于我在商店中拥有的MobX observable来改变体溢出样式的组件.
/*------------------------------------*\
Imports
\*------------------------------------*/
import React from 'react';
import connectStore from 'script/connect-store';
import addClass from 'dom-helpers/class/addClass';
import removeClass from 'dom-helpers/class/removeClass';
/*------------------------------------*\
Component
\*------------------------------------*/
class Component extends React.Component {
constructor(props) {
super(props);
this.constructor.displayName = 'BodyClassSync';
}
componentDidMount() {
this.checkAndUpdateMuiClass();
}
componentDidUpdate() {
this.checkAndUpdateMuiClass();
}
checkAndUpdateMuiClass() {
// This place is the only place I need latest MobX store...
if (this.props.store.muiOverlay) {
addClass(window.document.body, 'mod-mui-overlay');
}
else {
removeClass(window.document.body, 'mod-mui-overlay');
}
}
render() …Run Code Online (Sandbox Code Playgroud)