React 에서 Portals 와 오류 경계 처리 실현

Portals
슬롯 이 라 고 할 수 있 지만 Vue 의 slot 와 는 다 릅 니 다.React 요 소 를 지정 한 용기(실제 DOM)에 렌 더 링 하 는 것 을 말 합 니 다.
예 를 들 어 Modal 구성 요 소 는 기본적으로 body 의 실제 구조의 하위 요소 로 렌 더 링 됩 니 다.그러면 우 리 는 ReactDOM.createPortal(ReactElement,RealDOM container)을 통 해 React 요소,예제 코드 를 만 들 수 있 습 니 다.

import React from 'react'
import ReactDOM from 'react-dom'
import Modal from './components/Modal'

const PortalModal = ReactDOM.createPortal(<Modal />, document.body)

export default function App() {
    return <div className="app-container">
        <PortalModal />
    </div>
}

브 라 우 저 콘 솔 에서 볼 수 있 습 니 다.실제 Modal 구성 요 소 는 body 의 직접 하위 요소 로 렌 더 링 되 었 지만 React 개발 자 도 구 를 통 해 Modal 구성 요 소 는 가상 DOM 트 리 의 구조 에서 App 구성 요소 에 있 고 app-container 라 는 div 에 있 습 니 다.
그래서 우 리 는 React 구성 요소 가상 DOM 트 리 구조 와 실제 DOM 트 리 구 조 는 일치 하지 않 을 수 있다 는 결론 을 얻 을 수 있다.
따라서 사건 의 거품 에 주의해 야 한다.
  • React 의 사건 은 사실 포장 을 거 친 것 이다
  • 그 사건 의 거품 은 가상 DOM 나무의 구조 에 따라 발생 하 는 것 이지 실제 DOM 나무의 거품 메커니즘
  • 이 아니다.
    오류 경계 처리
    기본 적 인 상황 에서 하나의 구성 요소 가 렌 더 링 기간(render)에 오류 가 발생 하면 전체 구성 요소 트 리 가 모두 마 운 트 해제 됩 니 다.
    오류 경계:렌 더 링 기간 에 하위 구성 요소 에서 발생 하 는 오 류 를 캡 처 하고 부모 구성 요소 에 계속 전 파 를 막 을 수 있 는 구성 요소 입 니 다.
    어떤 구성 요소 가 오 류 를 포착 하도록 합 니 다(클래스 구성 요소):
    정적 방법 static getDerivedStateFromError 를 사용 하면 하위 구성 요소 렌 더 링 오류 가 발생 할 때 이 함수 가 실 행 됩 니 다.
  • 정적 방법 이 므 로 this
  • 를 사용 할 수 없습니다.
  • 이 함수 반환 값(대상)은 state 와 혼합 하여 덮어 쓰기 상태
  • 트리거 시간 은 렌 더 링 서브 구성 요소 에 오류 가 발생 한 후 페이지 를 업데이트 하기 전
  • 입 니 다.
  • 하위 구성 요소 렌 더 링 에 오류 가 발생 해야만 실행 할 수 있 습 니 다(즉,자체 구성 요소 에 오류 가 발생 하거나 형제 구성 요소,부모 구성 요소 에 오류 가 발생 해도 실행 되 지 않 습 니 다)
  • 
    import React, {PureComponent} from 'react'
    
    export default class ErrorBoundary extends PureComponent {
        state = {
            isError: false
        }
        static getDerivedStateFromError(error) {
            console.log('Rendering Error: ', error)
            return {
                isError: true
            }
        }
        render() {
            if (this.isError) {
                return <span>Something Wrong...</span>
            }
            return this.props.children
        }
    }
    
    
    componentDidCatch(error,info)함수 사용 하기
  • 실례 적 인 방법
  • 런 타임 은 렌 더 링 서브 구성 요소 에 오류 가 발생 한 후 페이지 가 업 데 이 트 된 후(상태 변경 은 구성 요소 트 리 를 마 운 트 해제 한 후에 구성 요소 트 리 를 다시 구축 하여 효율 을 낭비 할 수 있 습 니 다)
  • 보통 이 함 수 는 배경 으로 오류 정 보 를 전달 하고 기록 하 는 데 사 용 됩 니 다
  • 
    import React, {PureComponent} from 'react'
    
    export default class ErrorBoundary extends PureComponent {
        state = {
            isError: false
        }
        componentDidCatch(error, info) {
            // info          
            console.log('Rendering Error: ', error)
            console.log('Rendering info: ', info)
            this.setState({
                isError: true
            })
        }
        render() {
            if (this.isError) {
                return <span>Something Wrong...</span>
            }
            return this.props.children
        }
    }
    잘못된 경 계 를 사용 하지 않 았 다 면 어떻게 되 었 을 까?
    React 16 부터 오류 경계 에 포착 되 지 않 은 오류 가 발생 하면 React 구성 요소 트 리 전체 가 마 운 트 해제 됩 니 다.
    경험 치 는 오류 UI 를 유지 하 는 것 보다 완전히 제거 하 는 것 이 더 좋다 는 것 을 알려 준다.예 를 들 어 Messenger 와 유사 한 제품 에서 이상 한 UI 를 사용자 에 게 보 여주 면 사용자 가 다른 사람 에 게 정 보 를 잘못 보 낼 수 있다.
    오류 경 계 를 늘 리 면 응용 프로그램 에 이상 이 발생 했 을 때 더 좋 은 사용자 체험 을 제공 할 수 있 습 니 다.예 를 들 어 페 이 스 북 Messenger 는 사 이 드 바,정보 패 널,채 팅 기록 과 정보 입력 상 자 를 단독 오류 경계 에 포장 합 니 다.일부 UI 구성 요소 가 무 너 지면 나머지 부분 은 상호작용 을 할 수 있 습 니 다.
    주의 점
    일부 오류,오류 경계 구성 요소 가 캡 처 되 지 않 습 니 다.
    자체 구성 요소 오류
    비동기 오류(예 를 들 어 setTimeout 에서 던 진 오류)
    
    import React, {PureComponent} from 'react'
    
    // ErrorBoundary.jsx
    export default class ErrorBoundary extends PureComponent {
        state = {
            isError: false
        }
        /*         */
        static getDerivedStateFromError(error) {
            console.log('Rendering Error: ', error)
            return {
                isError: true
            }
        }
        render() {
            if (this.isError) {
                return <span>Something Wrong...</span>
            }
            return this.props.children
        }
    }
    
    // Comp.jsx Comp   
    export default funtion Comp() {
        setTimeout(() => {
            throw new Error('setTimeout error')
        }, 1000)
        return <div>Comp</div>
    }
    
    // App.jsx   
    export default function App() {
        return <>
            <ErrorBoundary>
                <Comp />
            </ErrorBoundary>
        </>
    }
    
    
    이벤트 에서 던 진 오류
    렌 더 링 서브 구성 요소 만 처리 하 는 동안 동기 화 오류
    React 에서 Portals 와 오류 경계 처리 가 이 루어 진 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 React Portals 와 오류 경계 처리 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!

    좋은 웹페이지 즐겨찾기