reactjs - 来自库的 React 上下文未在消费者中更新

Question

我原来是关注的this project将 Firebase 添加到 Gatsby React 应用程序。它涉及创建 Firebase 上下文，使用提供程序包装根布局，然后根据需要使用 withFirebase HOC 将组件与 Firebase 使用者一起包装。当我最初这样做时，它运行良好，但我想将代码移动到一个包中，我可以在我的应用程序之间重用。这是 HOC

export const withFirebase = (Component) => (props) => (
  <FirebaseContext.Consumer>
    {(firebase) => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

每个页面都以一个 Layout 组件开始呈现:

<FirebaseContext.Provider value={this.state.firebase}>
  <AppWithAuthentication>
    {this.props.children}
  </AppWithAuthentication>
</FirebaseContext.Provider>

AppWithAuthentication本身使用 withFirebase HOC，因为它需要 Firebase 来获取 AuthUser(然后将其存储在上下文中并通过提供程序传递)，并且它能够做到这一点。
以上所有内容都发生在包代码本身中，但是当我将包导入到我的其他 React 项目时，尝试使用 withFirebase停止工作，因为用它包装的任何组件都不会收到更新的上下文。我通过检查 React Dev 工具中的组件树来确认这一点，Firebase 提供程序获取更新的非空值，而消费者内部 AppWithAuthentication也得到了。但是我的实际应用程序中的使用者不会更新(我在同一个库中创建的 AuthUser 上下文也有同样的问题)。
我什至认为父级可能以某种方式使用更新的使用者进行渲染但子级没有重新渲染，但是在计算渲染并记录它们之后很明显我的应用程序中的组件渲染的次数超过 AppWithAuthentication .为了更清楚一点，这是我的组件树(从页面根部的 Layout 组件开始):

这是显示值的 Provider:

这是 AppWithAuthentication的消费者显示一个值:

这是我的应用程序内部的使用者 没有 有一个值(value):

我完全被困在这里，希望得到任何见解。
编辑:
经过更多测试，我发现了更多信息，但我仍然被卡住了。似乎在重新加载我的页面时， Layout组件渲染 2 次， Header和 AppWithAuthentication组件每个渲染 4 次，而 Login 组件只渲染 1 次。这就是消费者不更新的原因吗？ (但是为什么 Header 组件在更新时没有得到任何更新 AppWithAuthentication ？)
编辑2:
经过更多研究，我认为这个问题与webpack有关？我正在使用 Neutrino.js 来制作我的组件库，并将其构建的输出作为库。我找到了 this question这看起来很相似，并尝试在我的 .neutrinorc.js 中实现修复程序:

const reactComponents = require('@neutrinojs/react-components');

module.exports = {
  use: [reactComponents(),
  (neutrino) => {
     neutrino.config.output.library("upe-react-components");
     neutrino.config.output.libraryTarget("umd");
     neutrino.config.mode("development");
    }],
};

但它没有解决问题。有没有人遇到过 webpack 破坏 React 上下文的问题？

Answer 1

我从我的一个聪明的 friend 那里听说问题是因为 React 上下文是在模块级别定义的，因此由于您试图将上下文放在单独的入口点中，所以事情不会那么顺利。
我认为您可以尝试制作一个 index.js 文件来重新导入和导出所有内容，然后事情应该可以正常工作，因为它们都合并在一个模块中。