Bagaimana untuk memaparkan Semula React View pada Saiz Pelayar: jQuery vs React-Centric Approach?

Memaparkan semula Paparan pada Ubah Saiz Penyemak Imbas dengan React

Dalam aplikasi React yang diberikan, matlamatnya adalah untuk memaparkan semula paparan apabila tetingkap penyemak imbas diubah saiznya. Ini membolehkan pelarasan dinamik elemen UI, seperti kedudukan blok dalam reka letak seperti Pinterest.

Menggunakan Pustaka Saiz Tetingkap:

Satu pendekatan biasa adalah untuk gunakan acara ubah saiz tetingkap jQuery, seperti yang dicadangkan dalam soalan. Dengan menambah kod berikut, anda boleh memaparkan semula komponen apabila tetingkap diubah saiz:

$( window ).resize(function() {
  // Re-render the component
});

Pendekatan Berpusatkan Tindak Balas:

Walau bagaimanapun, terdapat lebih banyak pendekatan "React" untuk mencapai ini menggunakan useEffect Hook. Cangkuk ini membolehkan anda melakukan kesan sampingan dalam komponen, seperti mendengar peristiwa tetingkap. Untuk menggunakan useEffect untuk mengubah saiz tetingkap, anda boleh menentukan Cangkuk tersuai seperti ini:

import React, { useState, useEffect } from 'react';

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

Anda kemudian boleh menggunakan Cangkuk ini dalam komponen anda untuk mengakses saiz tetingkap dan mencetuskan pemaparan semula apabila ia berubah:

import React, { useState, useEffect } from 'react';
import { useWindowSize } from './useWindowSize';

function MyApp() {
  // ...
  const [windowSize, setWindowSize] = useWindowSize();

  useEffect(() => {
    // Re-render the component when the window size changes
    setWindowSize(useWindowSize());
  }, [windowSize]);

  return (
    // ...
  );
}

Pendekatan ini lebih terkapsul dan mengikut corak kitaran hayat React, memastikan kod komponen anda bersih dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan Semula React View pada Saiz Pelayar: jQuery vs React-Centric Approach?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!