隐藏Modal而非卸载组件的优势是什么？React Native Modal用法对比

首先是官方推荐的常规写法：

import * as React from 'react';
import { Modal, Portal, Text, Button, Provider } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);
  const containerStyle = {backgroundColor: 'white', padding: 20};

  return (
    <Provider>
      <Portal>
        <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
          <Text>Example Modal.  Click outside this area to dismiss.</Text>
        </Modal>
      </Portal>
      <Button style={{marginTop: 30}} onPress={showModal}>
        Show
      </Button>
    </Provider>
  );
};

export default MyComponent;

另一种条件渲染写法如下：

visible && (<Modal visible={true} onDismiss={hideModal} contentContainerStyle={containerStyle}>
  <Text>Example Modal.  Click outside this area to dismiss.</Text>
</Modal>)

两种写法的核心差异是：第一种让Modal组件始终保持挂载，仅通过组件自带的visible属性控制显隐；第二种在不需要显示时直接卸载Modal组件，仅在需要显示时才挂载并强制visible={true}。

官方推荐第一种写法的核心原因 #

• 动画体验完整：react-native-paper的Modal内置了平滑的入场、退场过渡动画，第一种写法下组件始终挂载，关闭时库内部会先触发退场动画，等动画执行完毕再完成隐藏逻辑，交互更自然。而第二种写法关闭时直接卸载组件，退场动画会被直接截断，Modal会瞬间消失，体验非常生硬。
• 性能开销更低：频繁开关Modal的场景下，第一种仅需修改visible属性触发重渲染，不需要走组件完整的挂载/卸载流程，也不需要重复创建销毁内部的原生视图、状态等。如果Modal内部结构复杂（带表单、长列表、异步请求），第二种每次打开都要重新加载内容，卡顿感会非常明显。
• 内部状态自动留存：第一种写法下Modal未被卸载，用户输入的半完成表单、滚动位置、临时选择的选项等状态都会自动保留，下次打开无需额外处理就能恢复。第二种写法关闭后状态直接丢失，要留存的话必须把所有状态提升到父组件，额外增加很多编码成本。
• 边界场景适配更完善：Modal自带的点击蒙层关闭、安卓物理后退键优先关闭Modal、无障碍标签等逻辑，都是基于组件挂载状态下visible属性的变化实现的，第一种写法可以直接复用这些内置能力，不需要额外处理边界case。第二种写法很容易出现Modal开着的时候点后退键直接退出页面、蒙层点击失效等bug。

第二种条件渲染写法的优劣 #

• 优点：Modal关闭后直接卸载，所有内部占用的资源（大图片、定时器、事件订阅等）都会被自动释放，不需要手动写清理逻辑，能避免内存泄漏问题。如果Modal使用频率极低（整个应用生命周期可能只打开1-2次）、内部资源非常重，用这种写法收益更高。
• 缺点：无退场动画、频繁打开性能差、内部状态无法自动留存、容易出现边界逻辑bug。

总结 #

绝大多数常规场景下，官方第一种写法的综合体验和编码效率都更好，是更通用的最优解。只有Modal满足「使用频率极低、内容极重、不需要保留临时状态」几个条件时，才考虑用第二种条件渲染的写法。

内容的提问来源于stack exchange，提问作者Mariano L