React에서 브라우저 크기 조정 시 뷰를 다시 렌더링하는 방법: jQuery와 React 후크 및 클래스?

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

배경

React를 활용하면 브라우저에 따라 웹 페이지 요소의 레이아웃을 동적으로 조정할 수 있습니다. 창 크기. 그러나 창 크기가 조정되고 보기가 자동으로 업데이트되지 않으면 문제가 발생할 수 있습니다. 이 문서에서는 브라우저 창 크기가 조정될 때 다시 렌더링을 트리거하는 방법이라는 일반적인 질문을 다룹니다.

코드

MyApp 구성 요소로 구성된 구성 요소 계층 구조가 있는 다음 React 애플리케이션을 고려해보세요. 페이지의 개별 블록을 나타내는 Block 구성 요소와 블록 모음을 나타내는 Blocks 구성 요소:

질문

jQuery의 창 크기 조정 이벤트를 사용하는 대신 수신하는 "React" 방법이 더 있습니까? 브라우저 크기 조정 이벤트 및 재렌더링 트리거를 위해?

답변

React Hooks 사용

React Hooks는 더 깔끔하고 기능적인 접근 방식을 제공합니다. 창 크기 조정 이벤트를 수신하는 사용자 정의 Hook을 생성할 수 있습니다:

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

React 클래스 사용

React 클래스에서는 componentDidMount 수명 주기 메서드에서 크기 조정 이벤트를 수신할 수 있습니다.

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

이 접근 방식은 좀 더 장황하지만 여전히 깔끔한 구현을 제공합니다.

위 내용은 React에서 브라우저 크기 조정 시 뷰를 다시 렌더링하는 방법: jQuery와 React 후크 및 클래스?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!