브라우저 창 크기 조정 시 반응에서 어떻게 다시 렌더링을 트리거할 수 있습니까?

브라우저 창 크기 조정 시 React 재렌더링을 트리거하는 방법

컨텍스트

React에서 브라우저 창과 같은 외부 요인을 기반으로 뷰 업데이트 최적화 특히 레이아웃의 경우 크기 조정이 중요합니다. 한 가지 접근 방식은 브라우저의 창 크기 조정 이벤트를 활용하는 것입니다.

React Hook 접근 방식

Modern React는 이러한 시나리오를 우아하게 처리하기 위해 후크를 사용합니다. 크기 조정 이벤트를 수신하는 사용자 정의 후크를 생성할 수 있습니다.

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

이 후크는 다시 렌더링하기 위해 창 크기 정보가 필요한 모든 구성 요소에서 사용할 수 있습니다.

React 클래스 기반 구성 요소 접근법

클래스 기반 컴포넌트의 경우, componentDidMount에서 resize 이벤트를 수신하는 것이 좋습니다. 이렇게 하면 구성 요소가 초기 화면 크기로 상태를 업데이트할 수 있습니다.

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

이러한 기술을 사용하면 브라우저 창 크기가 조정될 때 React 다시 렌더링을 손쉽게 트리거하여 최적의 레이아웃 업데이트와 반응형 동작을 보장할 수 있습니다. 귀하의 지원을 위해.

위 내용은 브라우저 창 크기 조정 시 반응에서 어떻게 다시 렌더링을 트리거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!