从另一个反应应用程序重新渲染反应应用程序

Question

我有两个反应应用程序，即appA和appB （两者都有自己的ReactDOM.render()方法），它们分别生成不同的构建文件，即bundleA.js和bundleB.js 。 这些包被加载到第三个应用程序，即container （一个普通的 js 应用程序）中。

它们之间使用全局/窗口变量共享一些公共状态。 例如，

window.pets = [
   {name: 'dog'},
   {name: 'cat'}
]

假设appA在window.pets添加/移除宠物。 它在appA更新，但不在appB 。 我尝试在两个应用程序中使用useEffect ，如下所示：

//object dependecy dependency
useEffect(()=>{
   console.log(window.pets);
},[window.pets])

//Also tried stringyting object
useEffect(()=>{
   console.log(window.pets);
},[JSON.stringify(window.pets)])

但它没有捕获其他应用程序中的全局状态变化。 任何建议都会有所帮助。

Answer 1

useEffect钩子只会在每次组件重新渲染时被调用。 您需要确保在window.pets更改时重新渲染您的组件。 就像@Raman Nikitsenka 评论的那样，当window.pets更改时，您可以使用某种事件发射器来重新渲染您的组件。

这些是你必须做的关键事情：

• 创建一个公共事件发射器
• useEffect订阅和退订使用的事件.on()和.off()
• 当外部状态改变时，以某种方式重新渲染组件。 我将setState()与Symbol()一起使用。

这是完整示例的链接： https : //codesandbox.io/s/react-global-state-ctp6d