Question

我有一个React组件。

@observer
export default class Tree extends Component

它与可观察的商店绑定

class TreeStore {
  @observable nodes;
}

TreeStore的一个实例作为商店传递给React组件。因此，render方法如下。

render() {
  const { store } = this.props;
  // render the nodes within the store
}

当我将商店作为道具传递给树组件时，一切都按预期工作。但是，当我将新的商店对象传递给Tree组件（一个新实例）时，不会重新渲染或刷新Tree组件。

容器组件看起来像这样：

render() {
  return (
    <div>
      <Select value={this.param} onChange={this.handleParamChange} />
      <Tree store={this.store} />
    </div>
  );
}

handleParamChange根据对下拉列表的更改创建一个新商店。

handleParamChange() {
  this.store = createAnotherStore(); // store is also observable!
}

我想知道幕后发生的事情。当React组件（观察者）绑定到Mobx可观察商店时会发生什么？导致重新渲染的原因是什么？如果我将它传递给新商店，我该如何重新组合该组件？

我浏览了mobx-react/observer代码。生命周期事件附加到组件。而componentWillMount做了很多事情。但是无法弄清楚正在观察哪些物体！（initialRender / reactiveRender）。如果我在道具中发送一个新商店，那也会被观察到吗？

更新

Mobx按预期工作。如果将新商店作为道具传递，则可观察者继续触发重新渲染。我的代码中有一些问题。经过一些修复，代码工作正常。我将结束这个问题。我没有删除它。因为，如果有人有类似的问题，问题在于他们的代码而不是Mobx。希望它有所帮助。

当React组件绑定到Mobx可观察商店时会发生什么？

更新

0 个答案: