Question

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

对我来说，实际情况是Modals。我可以保持模态的活跃＆＃39;状态在其父组件中，并作为支持传递给Modal，然后可能应用className＆＃39; active＆＃39;。或者，我可以拥有一个模态导航器＆＃39;确定要显示的模态，并将其引用传递给其他组件。

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详细介绍了React中的Modals。

在React中卸载或隐藏？

1 个答案: