브라우저 창 크기가 조정될 때 React에서 뷰를 다시 렌더링하는 방법은 무엇입니까?

React를 사용하여 브라우저 크기 조정 시 뷰 렌더링

React에서는 브라우저 창 크기가 조정될 때 뷰를 자동으로 업데이트하여 반응형 사용자 경험.

창 크기 조정 감지

jQuery의 창 크기 조정 리스너를 추가하는 것은 창 크기 조정을 감지하는 간단한 접근 방식입니다. 그러나 React는 좀 더 React 전용 메서드를 제공합니다.

React Hooks

React Hooks는 창 크기 조정 처리를 추가하는 선언적 방법을 제공합니다. useWindowSize Hook은 다음과 같이 정의할 수 있습니다:

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

React 클래스 구성 요소

클래스 구성 요소의 경우 수명 주기 메서드인 componentDidMount를 사용하여 창 크기 조정을 수신할 수 있습니다. 이벤트. 다음 코드는 이를 보여줍니다.

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

창 크기 조정 감지를 React 애플리케이션에 통합하면 UI가 반응성을 유지하고 다양한 화면 크기에 원활하게 적응하도록 할 수 있습니다.

위 내용은 브라우저 창 크기가 조정될 때 React에서 뷰를 다시 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!