React/Reduxアプリケーションの（再）レンダリング後にイベントをトリガーする方法

Question

私が開発したReact/Reduxアプリケーションはiframe内に存在する必要があります。周囲のドキュメントには、内部からメッセージを送信してiframeのサイズを変更するように指示することができます。 DOMが変更されるたびにサイズ変更メッセージを送信したいと思います。

一般的なMutationObserverを使用すると、DOMが更新されてからiframeのサイズが変更されるまでにちらつきが発生します。アプリケーションは

render(
    <Provider store={store}> 
    ... 
    </Provider>, 
    document.querySelector("..."), 
    resizeIframe 
); 

を使用して設定されて

resizeIframeコールバック関数は、最初のレンダリングを解決するが、子コンポーネントのアップデートには役立ちません。

resizeIframeをどのように反応（再）レンダリングにトリガーできますか？

編集：私はすべてのレンダリングでサイズ変更が非効率的であることを知っています。しかし、DOMのサイズ変更とiframeのサイズ変更の間の遅延を取り除くことは、より大きな問題であるようです。

Answer 1

componentWillReceiveProps（）を使用すると、小道具/状態が変更されたときに必要な操作を行うことができます。 反応についての詳細lifecycles

Answer 2

反応の基本的なアイデアの1つは、要素のレンダリングメソッドを呼び出す呼び出しが必ずしもDOMを変更するとは限りません。

したがって、すべてのコンポーネントのrenderメソッドが呼び出されるのに応答するのは良い考えのようには聞こえません。

あなたも書いた：DOMへの変更は必ずしも変更されません。

を私はDOMが

を変更し、いつでもこれはどちらか、大きな音ではありませんリサイズメッセージを送りたいですドキュメントのサイズ

あなたのアプリが存在するiframeやアプリのルート要素のサイズ変更を検出する必要があるようです。

import elementResizeDetectorMaker from 'element-resize-detector'; 

const erd = elementResizeDetectorMaker(); 
erd.listenTo(document.getElementById("test"), function(element) { 
    resizeIframe(); // the function you implemented earlier 
});