React でブラウザのサイズ変更時にビューを再レンダリングする方法: jQuery と React のフックとクラス?

ブラウザでのレンダリングビュー React によるサイズ変更

背景

React を利用すると、ブラウザに基づいて Web ページ上の要素のレイアウトを動的に調整できます窓のサイズ。ただし、ウィンドウのサイズが変更され、ビューが自動的に更新されない場合、問題が発生する可能性があります。この記事では、ブラウザ ウィンドウのサイズが変更されたときに再レンダリングをトリガーする方法という一般的な質問に対処します。

コード

MyApp コンポーネント、ページ上の個々のブロックを表す Block コンポーネント、およびブロックのコレクションを表す Blocks コンポーネント:

Question

jQuery のウィンドウ サイズ変更イベントを使用する代わりに、リッスンするためのより「React」な方法はありますか?ブラウザのサイズ変更イベントと再レンダリングのトリガーについては?

回答

React フックの使用

React Hook は、よりクリーンで機能的なアプローチを提供します。ウィンドウのサイズ変更イベントをリッスンするカスタム フックを作成できます:

<code class="javascript">function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}</code>

React クラスの使用

React クラスでは、componentDidMount ライフサイクル メソッドでサイズ変更イベントをリッスンできます:

<code class="javascript">componentDidMount() {
  window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
  window.removeEventListener('resize', this.updateDimensions);
}</code>

このアプローチはより冗長ですが、それでもクリーンな実装を提供します。

以上がReact でブラウザのサイズ変更時にビューを再レンダリングする方法: jQuery と React のフックとクラス?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。