Bagaimanakah Saya Boleh Mencetuskan Perenderan Semula dalam Reaksi Apabila Ubah Saiz Tetingkap Penyemak Imbas?

Cara Mencetuskan Paparan Semula React pada Saiz Semula Tetingkap Penyemak Imbas

Konteks

Dalam React, mengoptimumkan kemas kini paparan berdasarkan faktor luaran seperti tetingkap penyemak imbas mengubah saiz adalah penting, terutamanya untuk susun atur. Satu pendekatan ialah memanfaatkan peristiwa mengubah saiz tetingkap penyemak imbas.

Pendekatan Cangkuk React

Moden React menggunakan cangkuk untuk mengendalikan senario sedemikian dengan elegan. Anda boleh membuat cangkuk tersuai yang mendengar untuk mengubah saiz acara:

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

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>

Cangkuk ini boleh digunakan dalam mana-mana komponen yang memerlukan maklumat saiz tetingkap untuk pemaparan semula.

Komponen Berasaskan Kelas Bertindak Balas Pendekatan

Untuk komponen berasaskan kelas, mendengar acara ubah saiz dalam componentDidMount adalah disyorkan. Ini memastikan bahawa komponen mengemas kini keadaannya dengan dimensi skrin awal:

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

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };
  render() {
    return (
      <span>
        Window size: {this.state.width} x {this.state.height}
      </span>
    );
  }
  updateDimensions = () => {
    this.setState({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };
  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }
}</code>

Dengan menggunakan teknik ini, anda boleh mencetuskan React semula dengan mudah apabila tetingkap penyemak imbas diubah saiz, memastikan kemas kini reka letak optimum dan tingkah laku responsif untuk permohonan anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Perenderan Semula dalam Reaksi Apabila Ubah Saiz Tetingkap Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!