javascript - 如何在 react.js 中检测父组件中的子渲染

Question

我正在尝试缓存 App 组件的渲染标记。我知道这在某种程度上“违反了规则”，但我处于无服务器环境(chrome-extension)中。页面加载后，我想将缓存的 App 标记注入(inject) DOM。预期结果类似于在服务器上使用 react-component rendererd 的体验。非常像这里描述的那样:http://www.tabforacause.org/blog/2015/01/29/using-reactjs-and-application-cache-fast-synced-app/ .

为了说明我的用例，我更新了 Thinking in react example :

• 应用程序
  • 可过滤的产品表
    • 搜索栏
    • ProductTable(包含来自 reflux store 的状态)
      • 产品类别行
      • 产品行

正如预期的那样，App 中既没有调用 componentDidUpdate 也没有调用 componentWillUpdate。

是否有可能以合理的方式检测 App 组件中更新的子组件？最好不要修改子组件类？

我想避免将 props/state 移动到 App。

Answer 1

我想出了一个解决方案，它作为解决方案的一部分(无需修改子组件，或了解整个应用程序状态，例如:Flux 模式):

App 可以包装在一个组件中，该组件使用 MutationObserver 来跟踪 DOM 中的实际变化。