Question

我已经看到您可以执行以下操作：

// App.js
class App extends Component {
  @observable a = 'something'

  @action change() {
    this.a = 'else'
  }

  render() {
    return (
      ...
    )
  }
}

我还看到您可以在单独的文件中写入商店（这是我要做的）：

// StoreA.js
class StoreA {
  @observable a = 'something'

  @action change() {
    this.a = 'else'
  }
}

// App.js
@observer
class App extends Component {
  constructor() {
    this.store = new StoreA()
  }

  ...
}

这些方法之间有什么区别吗？一个比另一个好吗？

Answer 1

通常，这是将存储存储在其他文件中的一种更好的方法，这可以使您的代码更整洁，更易于阅读。如果您不重用它，则在评估这两种方法之间的效率时，不会有任何区别，只有更简洁的代码。

Answer 2

您始终希望您的商店存放在单独的文件中，因为您希望始终遵循关注分离的原则。

它不仅使事情更易于维护，而且更易于阅读。

此外，特别是在使用Mobx和React时，有很多理由将商店与组件文件分开。

首先，商店应该独立于组件之外。您应该避免在组件构造函数内部创建新存储。初始化组件构造函数中的商店的问题在于，每次销毁并重新创建组件时，您最终都会拥有一个新商店，这将导致不正确的行为。

第二，您希望存储在应用程序内的多个组件之间是可共享的，否则您将需要将所有存储作为道具传递，这有点混乱。在这种情况下，您将需要将应用程序存储区与React组件分开（否则，您将拥有一个导入地狱，并且最终会以循环引用的方式结束，在那里您的文件以循环方式从其他位置导入），然后使用{{ 1}} mobx-react和Provider和inject来访问整个应用程序中的商店。

我建议您看看mobx反应的样板，看看它是如何完成的https://github.com/mobxjs/mobx-react-boilerplate

将Mobx存储写入单独的文件中还是在React组件中更好？

2 个答案: