Bagaimana untuk Memaparkan Semula Paparan dalam Reaksi Apabila Tetingkap Penyemak Imbas Mengubah Saiz?

Membawa Semula Paparan pada Ubah Saiz Penyemak Imbas dengan React

Dalam React, adalah mungkin untuk mengemas kini paparan secara automatik apabila tetingkap penyemak imbas diubah saiz, memberikan pengalaman pengguna yang responsif.

Pengesanan Ubah Saiz Tetingkap

Menambah pendengar ubah saiz tetingkap jQuery ialah pendekatan yang mudah untuk mengesan saiz semula tetingkap. Walau bagaimanapun, React menawarkan beberapa lagi kaedah khusus React:

React Hooks

React Hooks menyediakan cara deklaratif untuk menambah pengendalian saiz semula tetingkap. Cangkuk useWindowSize boleh ditakrifkan seperti berikut:

<code class="javascript">import React, { useLayoutEffect, useState } from 'react';

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

Komponen Kelas React

Untuk komponen kelas, komponen kaedah kitaran hayatDidMount boleh digunakan untuk mula mendengar saiz semula tetingkap peristiwa. Kod berikut menunjukkan perkara ini:

<code class="javascript">import React from 'react';

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };

  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  };

  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }

  render() {
    return <span>Window size: {this.state.width} x {this.state.height}</span>;
  }
}</code>

Dengan memasukkan pengesanan ubah saiz tetingkap ke dalam aplikasi React anda, anda boleh memastikan UI anda kekal responsif dan menyesuaikan dengan lancar kepada saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Semula Paparan dalam Reaksi Apabila Tetingkap Penyemak Imbas Mengubah Saiz?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!