43

これは React で繰り返し発生する問題です。このcomponentDidMountメソッドは、コンポーネントが初めてレンダリングされるときに必ず起動されることが保証されているため、高さやオフセットなどの DOM 測定値を取得するのに自然な場所のように思えます。ただし、コンポーネントのライフサイクルのこの時点で、間違ったスタイルの読み取り値を受け取ることがよくあります。デバッガーを中断すると、コンポーネントDOM にありますが、まだ画面に描画されていません。ほとんどの場合、幅/高さが 100% に設定されている要素でこの問題が発生します。測定を行うと、componentDidUpdateすべて正常に動作しますが、このメソッドはコンポーネントの最初のレンダリングで起動しません。

だから私の質問は -componentDidMountすべてのブラウザの描画が完了した後に明らかに起動されないため、いつ正確に起動されるかです。

編集: この Stackoverflow の問題は、同じ主題を扱っています。

また、何が起こるかを説明するこの github の会話も参照しています。

4

5 に答える 5

7

ご存知かもしれませんがcomponentDidMount、最初のレンダリングの直後に 1 回だけトリガーされます。

componentDidUpdate測定を行っているため、コンポーネントの更新時に測定値が変更された場合に備えて、測定もトリガーする必要があるようです。

componentDidUpdate最初のレンダリングでは発生しないため、測定処理をトリガーするには両方のライフサイクル イベントが必要になる可能性があることに注意してください。この 2 番目のイベントがトリガーされるかどうか、および測定値が異なるかどうかを確認してください。

私の意見では、可能であればsetTimeoutorの使用を避けるべきです。requestAnimationFrame

React ライフサイクル リファレンス

于 2016-03-17T02:43:33.860 に答える