何时使用mobx中的计算/观察值

我觉得我得到了大部分的mobx，但我想澄清一些事情。我有一些观测商店，其中的核心是对象的数组（打字稿）：何时使用mobx中的计算/观察值

class ClientStore { 
    constructor() { 
     this.loadClients(); 
    } 

    @observable private _clients: IClient[] = []; 
    @computed get clients() { 
     return this._clients; 
    } 
    @observable isFetching: boolean = false; 
    @observable sortField: 'title' | 'modified' = 'modified'; 
    @observable sortDescending: boolean = true; 

    getClientByUrlName(urlName: string): IClient { 
     return this._clients.find(c => c.urlName === urlName); 
    } 
etc...

我的问题是，最后一个函数 - getClientByUrlName。既然这是从可观察的结果中发现的，任何使用该函数的@observer反应组件都会正确地重新渲染。这是这样的东西的惯用mobx？感觉这应该是一个计算值。我是否应该在想要使用它的组件中计算出一个值？

//import singletone ClientStore 
class ClientDetailsView extends React.Component<{params:{urlName:string}}, void> { 

    @computed get client() { 
     return ClientSotre.clients.find(c => c.urlName === this.props.params.urlName); 
    } 

...rest of react component

我正在寻找最佳实践和陷阱。任何帮助表示赞赏。

*编辑固定的代码示例错误

来源

2016-06-28 Jakke

原则@computed是简单的一个指令，它告诉MobX：“这个值可能缓存，直到任何被用来改变观测值”。所以实际上它们总是可以被忽略，这只是意味着你的应用程序将重新计算更多，但它不会改变结果。

因此，如果您在原则上不存在问题的函数上缺少@computed，则在大多数情况下不会有问题。如果是，您可以使用createTransformer，该函数接受一个参数函数并构建计算值的（自我清理）记忆缓存。但它有一点涉及，所以实际上你的解决方案在ClientDetailsView中引入计算属性更好。我确实会建议这样做，只要你有一个很好的地方来放置这个计算属性（在这种情况下需要它的组件）

来源

2016-06-28 14:51:52 mweststrate

啊哈！这看起来像是我失踪的一块。每次我浏览文档时，我都会看到一个部分，就好像它是全新的。当我写这个问题时，有趣的是，将组件中的计算属性粘贴到我的面前。 [偏离主题]我真的很喜欢MobX（顺便说一句，我从REDX转换而来）。我越学习它如何工作，就越喜欢它。感谢所有的辛勤工作！ – Jakke

我其实在最后几天重组了文档，所以这种印象是正确的:) – mweststrate

我有点困惑，为什么最好将'@ computed'放在ClientDetailsView中而不是存储中。将它放入商店有相同的效果？ – Jeff

何时使用mobx中的计算/观察值

回答

相关问题