卸载或隐藏在 React 中？答案

【问题标题】：Unmount, or hide in React?卸载或隐藏在 React 中？
【发布时间】：2016-11-19 22:58:50
【问题描述】：

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

我遇到的实际案例是 Modals。我可以将 Modal 的“活动”状态保留在其父组件中，并将其作为道具传递给 Modal，然后可能会应用 className“活动”。或者，我可以有一个模态“导航器”来确定要显示哪个模态，并将其引用传递给其他组件。

【问题讨论】：

找到了这个相关的问题：stackoverflow.com/questions/12079345/…我还是很好奇React的virtual dom对这个有什么影响
我更喜欢通过移除组件来隐藏，因为如果它使用模型中的状态，它不会被更新以防它被隐藏，因此不会调用渲染或更新来更新隐藏的东西。
如果您想为组件的离开/进入设置动画，使用 CSS 可能会更容易。尽管您也可以为此使用ReactCSSTransitionGroup。如果您不想制作动画，则根本不要渲染它。

标签： javascript dom optimization reactjs

【解决方案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。

【讨论】：

这太棒了！也感谢你的文章，我喜欢这个方法