react-native - Mobx @compute函数与参数

我是Mobx的新手，但到目前为止，它的运行情况一直很好，而且我已经走得很远。我有一个使用mobx和mobx-persist的react-native应用程序。我正在使用axios从Wordpress网站提取帖子。我要改进的功能是“添加到收藏夹”功能。

这是我的PostsStore:

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函数来确定当前呈现的帖子是否已添加了“id”是首选。可观察的“收藏夹”数组。但是，似乎@computed函数不允许带参数(最小参数将是帖子的“id”，以评估它是否位于收藏夹可观察的数组中。我可以使用@action完成测试，但不能这样做)正如下面的代码所示，我被迫在组件render中使用“if”语句执行测试。

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

这会影响我的应用程序的性能吗？是否有@computed方式来做我想做的事？我是否应该为此担心而不必担心呢？

最佳答案

这样做有效:

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

在我看来是这样调用的:

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

关于react-native - Mobx @compute函数与参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49398091/

MobX

react-native - Mobx @compute函数与参数