從另一個反應應用程序重新渲染反應應用程序

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