Question

我的项目是基于React构建的，对于状态管理，正在使用Mobx。我们没有使用装饰器，因此需要观察可观察对象的组件需要以下列方式包装：

import React from 'react';
import {observer} from 'mobx-react';
import MyComponent from '../app/my-component.jsx';
import myFilter from './my-filters.jsx';

export default observer(() => {
  return <MyComponent filter={myFilter}/>;
});

组件MyComponent正在接收observables作为props：

static propTypes() {
    return {
      myFilter: React.PropTypes.function.isRequired
    };
  }

它在渲染方法中使用：

render() {
  if (this.props.myFilter.filterValue1 !== null) {
    // some code here
  }
}

在这种情况下，

myFilter是可观察的，看起来像这样：

import {observable} from 'mobx';

const myFilter = observable({
  filterValue1: null,
  filterValue2: null,
  addOrRemoveItem() {
    // some function here
  }
});

export default myFilter;

在这种情况下，如果某个组件改变myFilter，则接收observable作为道具的观察者MyComponent并不总是重新渲染。在某些情况下，这可以通过在调用组件之前按属性寻址可观察对象来解决。 E.g：

export default observer(() => {
  console.log(myFilter.filterValue1);
  return <MyComponent filter={myFilter}/>;
});

但这不稳定。是否有一个有效的解决方法来避免这种情况？

Answer 1

将MyComponent声明为观察者。

<{1>}中的

导出应该如下所示

app/my-component.jsx

这段代码

export default observer(MyComponent);

将匿名无状态组件而不是export default observer(() => { return <MyComponent filter={myFilter}/>; });转换为观察者。

MobX文档明确指出，您需要将MyComponent应用于呈现可观察数据的所有组件，否则您将遇到问题。

解决问题的另一种方法是将来自此匿名无状态组件的纯数据传递到observer。

MyComponent

这样MyComponent将被重新呈现，因为每次重新呈现其父元素时它都会收到新的道具。

Answer 2

Alik是对的，你也需要MyComponent成为观察者。

否则，您所拥有的唯一可观察内容中的代码<MyComponent filter={myFilter}/>意味着只有在myFilter对象（即对其引用）发生更改时才需要刷新。它不访问任何属性，因此当这些属性更改时不需要刷新。这就是当您访问filterValue1语句中的console.log属性时刷新组件的原因。

MobX observables更改并不总是触发观察者组件渲染

2 个答案: