reactjs - 为什么我需要将 Context 或 Provider 与 MobX 一起使用？

Question

我正在尝试学习如何将 MobX 与 React 结合使用，但我不明白为什么需要使用 Provider 或 Context，如果保存状态的对象永远不会改变，只会改变其内容。

例如我在 store.js 中有一个商店(一个随时间变化的简单计时器):

import { decorate, observable, action } from 'mobx';
import React from 'react';

class TheTimer {
    currentTick = 0; // In seconds since start

    tick = () => {
        this.currentTick = Math.floor(performance.now() / 1000);
    }
}

decorate(TheTimer, {
    currentTick: observable,
    tick: action
});

// Bare store
export const timerStore = new TheTimer();
// Store as React context
export const TimerStoreContext = React.createContext(timerStore);

// This makes the timer go
setInterval(timerStore.tick, 100);

现在在组件中使用裸存储没有问题:

import React from 'react';
import { configure } from 'mobx';
import { observer } from 'mobx-react';

import { timerStore } from './store';

configure({ enforceActions: 'observed' });

const App = observer(() => {
    return (
        <p>{timerStore.currentTick}</p>
    );
});

export default App;

使用上下文也有效:

import React from 'react';
import { configure } from 'mobx';
import { observer } from 'mobx-react';

import { TimerStoreContext } from './store';

configure({ enforceActions: 'observed' });

const App = observer(() => {
    const timerStore = React.useContext(TimerStoreContext);

    return (
        <p>{timerStore.currentTick}</p>
    );
});

export default App;

(我使用的是 create-react-app 加上 mobx、mobx-react，即 React 16.9.0 与 MobX 5.13.0 和 mobx-react 6.1.3)

请注意，商店创建一次，从那时起它始终保持相同的对象。

为什么在直接使用存储作为全局变量时每个人都使用 Context(或基于旧版 mobx-react Provider 的解决方案)也可以工作？

这只是关于可测试性吗？

请注意，我还有非 React 的 JS 代码，应用程序通过 Websockets 与服务器进行通信，来自服务器的更新也将导致调用操作；我计划为此使用裸存储，因为该代码位于 React 组件之外。

Answer 1

我前段时间对这个问题很感兴趣。我从维护者那里得到的答案是因为代码的可测试性。

使用示例中的代码，您基本上将 TheTimer 类视为单例。

如果你真的不喜欢使用 React.context 你也可以使用 service locator pattern相反(但基本上是同一件事)

export const ListHolder = observer(function(props) {
  const listStore = serviceLocator.get(STORES.LIST_STORE)
  return (
    <div>
      <div className={styles.wrap}>
        {listStore.lists.map(list => {
          return <List key={list.id} list={list} />
        })}
      </div>
    </div>
  )
})

另请参阅 MobX 存储库上关于这个问题的冗长但有趣的讨论。

suggested best practice for holding onto a store constructed with props