Bagaimana untuk Memaparkan Semula Paparan pada Ubah Saiz Pelayar dalam React: jQuery vs. React Hooks dan Classes?

Paparan Semula pada Ubah Saiz Penyemak Imbas dengan React

Latar Belakang

Menggunakan React, anda boleh melaraskan susun atur elemen pada halaman web berdasarkan penyemak imbas secara dinamik saiz tingkap. Walau bagaimanapun, anda mungkin menghadapi masalah apabila tetingkap diubah saiz dan paparan tidak dikemas kini secara automatik. Artikel ini menangani soalan biasa: bagaimana untuk mencetuskan pemaparan semula apabila tetingkap penyemak imbas diubah saiz.

Kod

Pertimbangkan aplikasi React berikut dengan hierarki komponen yang terdiri daripada komponen MyApp, a Komponen blok yang mewakili blok individu pada halaman dan komponen Blok yang mewakili koleksi blok:

Soalan

Daripada menggunakan acara ubah saiz tetingkap jQuery, adakah terdapat lebih banyak cara "React" untuk mendengar untuk acara mengubah saiz penyemak imbas dan mencetuskan pemaparan semula?

Jawab

Menggunakan React Hooks

React Hooks menyediakan pendekatan yang lebih bersih dan berfungsi. Anda boleh membuat Cangkuk tersuai yang mendengar peristiwa mengubah saiz tetingkap:

<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>

Menggunakan Kelas React

Dalam kelas React, anda boleh mendengar peristiwa ubah saiz dalam kaedah kitaran hayat componentDidMount:

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

Pendekatan ini lebih bertele-tele tetapi masih menyediakan pelaksanaan yang bersih.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Semula Paparan pada Ubah Saiz Pelayar dalam React: jQuery vs. React Hooks dan Classes?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!