在 react native 中使用 switch 动态渲染表单步骤时，若将子组件（如 step1）定义在父组件内部，会导致 textinput 每次输入后失焦——根本原因是组件重复声明引发重新挂载，破坏了状态持久性。
该问题本质源于 React 函数组件的闭包与渲染机制：当 Step1 被定义在 AddProductModal 函数体内时，每次父组件重渲染（例如 setTitle 触发状态更新），Step1 都会生成一个全新的函数引用。React 将其视为“不同组件”，从而卸载旧实例、挂载新实例——导致
✅ 正确做法是：将步骤组件提取为独立的、稳定的函数组件，并通过 props 传递状态和更新函数，确保其在整个生命周期内保持引用一致。
以下是修复后的完整实现：
// ✅ 步骤组件必须定义在顶层作用域（不在主组件内部）
const Step1 = ({ title, setTitle }) => (
Title
);
const Step2 = () => (
Step 2 Content
);
export default function AddProductModal({ isVisible, toggleModal, page, setPage }) {
const [title, setTitle] = useState('');
const getCurrentComponent = () => {
switch (page) {
case 1:
return
{getCurrentComponent()}
);
}? 关键要点总结：
- ❌ 错误模式：在函数组件内部定义子组件（如 const Step1 = () => ... 在 AddProductModal 内）→ 每次渲染都创建新组件，触发 TextInput 卸载/重建；
- ✅ 正确模式：子组件声明于模块顶层 → 保持函数引用稳定，React 可正确复用 DOM/View 实例；
- ? 进阶建议：若步骤较多，可进一步结合 React.memo(Step1) 防止不必要的重渲染；对 onChangeText，推荐直接传 setTitle 而非匿名函数 (v) => setTitle(v)，以减少闭包创建；
- ⚠️ 注意事项：确保所有依赖状态（如 title、setTitle）均通过 props 显式传递，避免子组件意外捕获过期闭包。
此方案不仅解决失焦问题，更符合 React 最佳实践——组件结构清晰、可测试性强、性能可控。
