コンポーネントのレンダリングされた高さに基づいてリアクションsetState

Question

コンポーネントの実際の高さに基づいてクラスを設定する必要があるコンポーネントを作成しています。例えば：

身長>maxHeight： <div className='greater-than-max-height' />

高< = maxHeight： <div className='less-than-max-height' />

のみcomponentDidMountで知られているコンポーネントの高さ。 componentDidMountにsetStateを実行すると、再レンダリングが発生するため、お勧めしません。これをどうやって解決しますか？

Answer 1

もっとも簡単な解決策は、setStateをcomponentDidMountに入れるだけです。あなたはとにかく再レンダリングが必要なので。単純なコンポーネントの場合、再レンダリングはそれほど高価ではありません。

しかし、コンポーネントの構造が複雑で子どもの中には計算が必要なものがある場合は、shouldComponentUpdate（または単にPureComponent）を子コンポーネントに実装することをお勧めします。

もう1つの解決策は、実際のDOMを直接操作することです。それは汚れて見えますが、あなたは最高のパフォーマンスが（あなたが不要なレンダリングコンポーネントやDOMの更新がないことを保証することができます）を取得

あなたのコンポーネントが更新され、その高さを変更している場合、あなたはクラス名を更新することに注意

componentDidMount() { 
    const height = getHeight() 
    const div = document.getElementById('yourDivId') 
    if (height > MAX_HEIGHT) { 
    div.className = 'greater-than-max-height' 
    } else { 
    div.className = 'less-than-max-height' 
    } 
} 

、あなたはそのための機能を抽出することができ

（両方のソリューションがする必要がある）componentDidUpdateでこれを行うためにも必要があります：

updateDivClass() { 
    const height = getHeight() 
    const div = document.getElementById('yourDivId') 
    if (height > MAX_HEIGHT) { 
    div.className = 'greater-than-max-height' 
    } else { 
    div.className = 'less-than-max-height' 
    } 
} 

componentDidMount() { 
    this.updateDivClass() 
} 

componentDidUpdate() { 
    this.updateDivClass() 
}