卸载还是隐藏在 React 中？

Question

什么更有效？我应该挂载和卸载组件，还是用 css 显示和隐藏它们？

我想到的实际案例是模态。我可以将 Modal 的“活动”状态保留在其父组件中，并将其作为道具传递给 Modal，然后可能会应用 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;

这是一篇文章，详细介绍了 React 中的 Modals。