アンマウント、またはReactで非表示にしますか？

Question

何がより効率的ですか？コンポーネントをマウントしたりマウント解除したりする必要がありますか？

これが私のために現れた実際的なケースは、モーダルです。私は、親コンポーネントにモーダルの「アクティブ」状態を維持し、それをモーダルへの支柱として渡すことができます。これはおそらくclassName 'active'を適用します。または、私は表示するモーダルを決定するモーダル 'ナビゲータ'を持つことができ、その参照は他のコンポーネントに渡されます。

Answer 1

私はアイテムが必要ない場合は常にreturn nullですが、私はいつも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ビットに移行していますReactのModalsについての詳細