React组件间条件渲染时如何保持数据状态不丢失

在React应用里，条件渲染是非常普遍的需求，比如标签页切换、弹窗显示隐藏、步骤表单流转等。但如果直接通过if判断挂载或卸载子组件，被卸载的组件其自身state会立即销毁，再次渲染时数据归零，造成用户输入丢失或接口重复请求。下面介绍几种在React组件间条件渲染时保持数据状态的有效方案。

一、状态提升到公共父组件

最直观的办法是把需要保留的数据放到条件渲染的父组件中，通过props下发数据和修改方法。这样无论子组件是否卸载，数据都存活在父组件里。

import React, { useState } from 'react';

function FormA({ data, setData }) {
  return (
    <input
      value={data.name}
      onChange={e => setData({ ...data, name: e.target.value })}
      placeholder='请输入名称'
    />
  );
}

function FormB({ data, setData }) {
  return (
    <input
      value={data.age}
      onChange={e => setData({ ...data, age: e.target.value })}
      placeholder='请输入年龄'
    />
  );
}

export default function Parent() {
  const [showA, setShowA] = useState(true);
  const [formData, setFormData] = useState({ name: '', age: '' });

  return (
    <div>
      <button onClick={() => setShowA(v => !v)}>切换表单</button>
      {showA
        ? <FormA data={formData} setData={setFormData} />
        : <FormB data={formData} setData={setFormData} />}
    </div>
  );
}

二、使用Context避免层层传递

当组件层级较深时，用Context可以把状态集中管理，条件渲染的兄弟组件都能读取同一份数据，而不必手动提升state到最近公共父级之外。

import React, { createContext, useContext, useState } from 'react';

const FormContext = createContext(null);

function PanelA() {
  const { data, setData } = useContext(FormContext);
  return <input value={data.email} onChange={e => setData({ ...data, email: e.target.value })} />;
}

function PanelB() {
  const { data, setData } = useContext(FormContext);
  return <input value={data.phone} onChange={e => setData({ ...data, phone: e.target.value })} />;
}

export default function App() {
  const [data, setData] = useState({ email: '', phone: '' });
  const [tab, setTab] = useState('a');
  return (
    <FormContext.Provider value={{ data, setData }}>
      <button onClick={() => setTab('a')}>A</button>
      <button onClick={() => setTab('b')}>B</button>
      {tab === 'a' ? <PanelA /> : <PanelB />}
    </FormContext.Provider>
  );
}

三、借助状态管理库

对于大型项目，可以使用Redux、Zustand等库将状态放在全局store。条件渲染的组件从store取值，卸载后数据依然保留，重新挂载时直接恢复。

import { create } from 'zustand';

const useStore = create(set => ({
  user: { name: '', city: '' },
  updateUser: patch => set(s => ({ user: { ...s.user, ...patch } }))
}));

// 在条件渲染的组件中
function CityForm() {
  const user = useStore(s => s.user);
  const updateUser = useStore(s => s.updateUser);
  return <input value={user.city} onChange={e => updateUser({ city: e.target.value })} />;
}

四、缓存组件实例实现keep-alive

如果希望组件不被卸载、仅隐藏，可以始终渲染但用CSS控制显示，或利用第三方库缓存实例。这样组件内部state完全保留。

function HiddenWrap({ show, children }) {
  return <div style={{ display: show ? 'block' : 'none' }}>{children}</div>;
}

// 使用：两个组件都挂载，仅切换显隐
// <HiddenWrap show={tab==='a'}><FormA/></HiddenWrap>
// <HiddenWrap show={tab==='b'}><FormB/></HiddenWrap>

五、方案对比

实际开发中，应根据项目规模与交互复杂度选择合适方式。轻量场景用状态提升或Context即可，复杂系统推荐引入状态管理库，而对动画或表单连续性要求高时可用隐藏挂载策略。

React条件渲染状态管理修改时间：2026-07-29 13:42:26