마운트 해제하거나 React에서 숨기시겠습니까?

Question

무엇이 더 효율적입니까? 구성 요소를 마운트하고 마운트 해제하거나 CSS로 표시하거나 숨길 수 있습니까?

나를 위해 실용적인 경우는 모달입니다. 모달의 '활성'상태를 부모 구성 요소에 유지하고 모달의 소품으로 전달하여 className 'active'를 적용 할 수 있습니다. 또는 표시 할 모달을 결정하는 모달 '탐색기'를 가질 수 있으며 해당 참조가 다른 구성 요소로 전달됩니다.

Answer 1

항목을 표시 할 필요가 없으면 항상 return null입니다.

주된 이유는 서버 쪽 렌더링을하고 있고 숨겨진 HTML 줄이 수백 개 있지만 여전히 렌더링되지만 그 위에 불필요한 많은 데이터를 보내고 있다는 것입니다. 철사.

(또는 '지휘자'아래) 귀하의 DOM 트리의 상단에있는 마지막 자식으로 앉아서 적절한 모달 또는 null 반환 모달 '네비게이터':

import React from 'react'; 

import ExportDataModal from './ExportDataModal.jsx'; 
import SignInModal from './SignInModal.jsx'; 
import FeedbackModal from './FeedbackModal.jsx'; 
import BoxDetailsModal from './BoxDetailsModal.jsx'; 

const ModalConductor = props => { 
    switch (props.currentModal) { 
    case 'EXPORT_DATA': 
     return <ExportDataModal {...props}/>; 

    case 'SOCIAL_SIGN_IN': 
     return <SignInModal {...props}/>; 

    case 'FEEDBACK': 
     return <FeedbackModal {...props}/>; 

    case 'EDIT_BOX': 
     return <BoxDetailsModal {...props}/>; 

    default: 
     return null; 
    } 
}; 

export default ModalConductor; 

Here's an article 조금로 간다 Reality에있는 Modals에 대한 세부 정보.