React Native：设置visible={false}的多Modal是否影响性能？

• 运行时性能差异
  多数主流UI框架（比如Ant Design、Element UI）的Modal组件，当设置visible={false}时，默认不会渲染内部的DOM内容，只会保留最基础的容器（甚至完全不挂载到DOM）。这种情况下，和不使用这些Modal相比，几乎不会额外消耗性能，也不会增加DOM节点数量导致重绘重排问题。
  但如果是你自己实现的Modal组件，没做懒渲染优化——比如仅用display: none或visibility: hidden隐藏，内部内容仍完整渲染到DOM里，那确实会增加页面的DOM总量，长期来看可能拖慢页面交互时的性能。

• 首屏加载速度影响
  框架自带的Modal基本都做了懒加载处理：只有当visible切换为true时，才会渲染Modal的内部内容。所以首屏加载阶段，这些隐藏的Modal不会提前渲染内容，自然不会影响首屏加载速度。
  要是自定义Modal没做懒加载，不管是否显示都直接渲染所有内部元素，那首屏时浏览器要解析、渲染这些额外的DOM，还可能加载Modal关联的资源（比如图片、样式），肯定会拖慢首屏加载的速度。

总结建议：用成熟UI框架的Modal组件无需担心这类问题；如果是自定义实现，建议通过条件渲染（比如{visible && <ModalInner />}）来延迟内容渲染，避免不必要的性能消耗。

内容的提问来源于stack exchange，提问作者Huan Huynh