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 와 오류 경계 처리 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!