Question

我是Mobx的新手，但到目前为止它已经很好用了，而且我已经成功了。我有一个反应本机应用程序与mobx和mobx-persist。我使用axios从Wordpress网站上提取帖子。我试图改进的功能是＆＃34;添加到收藏夹＆＃34;特征

这是我的帖子商店：

export default class PostsStore {

// Define observables and persisting elements
@observable isLoading = true;
@persist('list') @observable posts = [];
@persist('list') @observable favorites = [];

// Get posts from Wordpress REST API
@action getPosts() {
  this.isLoading = true;
  axios({
    url: 'SITE_URL',
    method: 'get'
  })
    .then((response) => {
      this.posts = response.data
      this.isLoading = false
    })
    .catch(error => console.log(error))
}

// Add post to favorites list, ensuring that it does not previously exist
@action addToFavorites(id) {
  if (this.favorites.indexOf(id) === -1) {
    this.favorites.push(id);
  }
}

// Remove post from favorites list, ensuring that it does indeed exist
@action removeFromFavorites(id) {
  if (this.favorites.indexOf(id) !== -1) {
    this.favorites.remove(id);
  }
}

}

在我的收藏夹组件中，用于渲染按钮以添加或删除收藏夹，我认为使用@computed函数将首选确定正在呈现的当前帖子是否为＆＃39 ; ID＆＃39;已被添加到可观察的收藏夹＆＃39;阵列。但是，似乎不允许@computed函数接受参数（最小参数将是post＆＃39; id＆＃39;来评估它是否在收藏夹可观察数组中。我可以完成使用@action进行测试，但似乎没有立即更新渲染的屏幕，这是目标。正如下面的代码所示，我被强制执行测试，如果＆＃39; if＆＃39;组件渲染中的语句。

render () {
  if (this.props.postsStore.favorites.includes(this.props.item.id)) {
    return (
      <Button
        onPress={() => this.props.postsStore.removeFromFavorites(this.props.item.id)}
        title="★"
      />
    )
  }

这是否会影响我的应用程序的性能？是否有@computed方式来做我想要的？我不应该担心这个，因为它有点工作吗？

Answer 1

这样做有效：

@computed get isFavorite() {
   return createTransformer(id => this.favorites.includes(id))
}

在我的观点中这样称呼：

this.props.postsStore.isFavorite(this.props.item.id)

Answer 2

仅出于完整性考虑：mobx-utils现在提供了一种在计算函数中使用参数的方法。您可以使用computedFn并声明您的函数，如下所示：

isFavorite = computedFn(function isFavorite(id) {
    return this.favorites.includes(id)
})

看看文档中的article。

Answer 3

我不确定这里是否需要@computed，因为每次createTransformer更改后调用它都会创建一个新的this.favorites。

仅使用单个createTransformer

，这应该会产生相同的结果

isFavorite = id => createTransformer(id => this.favorites.includes(id))

Mobx @computed函数带参数

3 个答案: