javascript - 为什么不直接使用共享导入而不是 React.createContext？

Question

我正在构建一个应用程序，并且我有一个管理 websockets 的类，我希望在每个组件中都可以使用它，因为它们中的很多都是从中读取的。试图避免通过无数组件传递道具。

为此，我一直在尝试使用React.createContext，但我收到了这样的错误：

App defines an invalid contextType. contextType should point to the Context object returned by React.createContext().

可能有一个解决方法，但我开始怀疑：为什么不把我想要共享的值放入一个 lib 文件中，然后将该文件导入到我需要共享值的文件中？这有什么缺点吗？

使用 mobx observable/observe 模式，对属性的更新似乎仍然反映在 dom 中。

例如：

shared.js

import { observable } from 'mobx';

class SharedClass {
  @observable x = 1;
}

const sharedInstance = new SharedClass(1);

export {
  sharedInstance,
}

应用程序.js

import { observer } from "mobx-react";
import { sharedInstance } from 'lib/shared';

@observer
class App extends React.Component() {
  constructor(props) {
    super(props);

    sharedInstance.x = 2;
  }

  render() {
    return <>
      The shared value is {sharedInstance.x}.

      <Stuff... eventually with a nested Page component>
    </>
  }
}

页面.js

import { observer } from "mobx-react";
import { sharedInstance } from 'lib/shared';

@observer
class Page extends React.Component {
  render() {
    return <>
      The shared value is {sharedInstance.x}.
    </>;
  }
}

标签： javascriptreactjsmobx-react