我正在尝试缓存App组件的渲染标记。我知道这在某种程度上是“违反规则的”，但我处于无服务器环境（chrome 扩展）中。在页面加载时，我想将缓存的App标记注入 DOM。预期的结果类似于在服务器上使用 react-component 渲染器的体验。非常像这里描述的：http : //www.tabforacause.org/blog/2015/01/29/using-reactjs-and-application-cache-fast-synced-app/。
reflux商店的状态）
正如预期的那样，既没有componentDidUpdate也没有componentWillUpdate被调用App。
是否可以以App理智的方式检测组件中更新的子组件？最好不修改子组件类？
我想避免将 props/state 移动到App.
我想出了一个解决方案，它可以作为解决方案的下降（无需修改子组件，或了解整个应用程序状态，例如：Flux 模式）：
App可以包装在一个组件中，该组件使用MutationObserver来跟踪 DOM 中的实际更改。
您可以在 App 中定义一个回调，该回调通过props通过其子层次结构向下传递，如果调用子的 componentDidUpdate 方法，则触发该回调。但是，如果您有很多孩子的深层层次结构，这可能会变得混乱。
我有一种情况，我想this.setProps(…)在单元测试中进行（当组件在没有父级的情况下呈现时）。但是如果在有父母的情况下完成它会导致错误。
我的解决方法只是像<MyComponent renderingWithoutParentForTest={true} />在单元测试中一样设置一个props，并使用该props作为条件。
不过，我承认这很丑陋。在这种特殊情况下，这似乎是有道理的。
React 文档提出了两种处理子对父通信的方法。已经提到了第一个，它是将一个或多个函数作为 props 从父组件向下传递通过层次结构，然后在子组件中调用它们。
孩子对父母的沟通：https : //facebook.github.io/react/tips/communicate-between-components.html
二是使用全局事件系统。您可以构建自己的事件系统，该系统可以很容易地用于这些目的。它可能看起来像这样：
var GlobalEventSystem = {
events: {},
subscribe: function(action, fn) {
events[action] = fn;
},
trigger: function(action, args) {
events[action].call(null, args);
}
};
var ParentComponent = React.createClass({
componentDidMount: function() {
GlobalEventSystem.subscribe("childAction", functionToBeCalledWhenChildTriggers);
},
functionToBeCalledWhenChildTriggers: function() {
// Do things
}
)};
var DeeplyNestedChildComponent = React.createClass({
actionThatHappensThatShouldTrigger: function() {
GlobalEventSystem.trigger("childAction");
}
});
这在某种程度上类似于 Flux 模式。使用 Flux 架构可能有助于解决您的问题，因为订阅事件的视图组件的想法是 Flux 的重要组成部分。所以你会让你的父组件订阅你 Store(s) 中的一些事件，这些事件本来是由子组件触发的。