React子组件隐藏后重渲染丢失状态的原因及解决方法

你当前的实现中，父组件通过{showChild? <Child1 /> : null}控制子组件的显示隐藏——当showChild为false时，子组件会被完全卸载，组件内部的state会被销毁；再次显示时，React会创建一个全新的子组件实例，所以之前的输入值会丢失。

方案一：状态提升到父组件（React推荐方案） #

将输入框的状态移到父组件中，通过props传递给子组件。这样无论子组件是否卸载，状态都会保存在父组件中，不会丢失。

修改后父组件代码 #

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Child1 from "./child";

import "./styles.css";

function Parent() {
  const [message, setMessage] = useState("initial text");
  const [showChild, setShowChild] = useState(true);
  // 把输入框状态移到父组件
  const [childInputValue, setChildInputValue] = useState("");

  useEffect(() => {
    console.log("useeffect in parent");
  });

  return (
    <div className="App">
      <button onClick={() => setShowChild(!showChild)}>show child</button>
      {showChild ? 
        <Child1 
          inputValue={childInputValue}
          onInputChange={setChildInputValue}
        />
        : null
      }
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

修改后子组件代码 #

import React, { useEffect } from "react";

function Child1({ inputValue, onInputChange }) {
  useEffect(() => {
    console.log("useeffect in child");
    console.log("newMessage: " + inputValue);
  }, [inputValue]); // 添加依赖项，避免不必要的重复执行

  return (
    <div>
      <input 
        value={inputValue}
        onChange={(event) => onInputChange(event.target.value)} 
      />
    </div>
  );
}

export default Child1;

方案二：用CSS隐藏而非卸载组件 #

保持子组件始终挂载在DOM中，通过CSS的display属性控制显示隐藏，这样组件的state会被保留。

修改后父组件代码 #

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Child1 from "./child";

import "./styles.css";

function Parent() {
  const [message, setMessage] = useState("initial text");
  const [showChild, setShowChild] = useState(true);

  useEffect(() => {
    console.log("useeffect in parent");
  });

  return (
    <div className="App">
      <button onClick={() => setShowChild(!showChild)}>show child</button>
      {/* 通过style控制显示隐藏，不卸载组件 */}
      <Child1 style={{ display: showChild ? "block" : "none" }} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

子组件代码（可选修改） #

import React, { useEffect, useState } from "react";

function Child1({ style }) {
  useEffect(() => {
    console.log("useeffect in child");
    console.log("newMessage: " + newMessage);
  });
  const [newMessage, setNewMessage] = useState("");

  return (
    <div style={style}>
      <input onChange={(event) => setNewMessage(event.target.value)} />
    </div>
  );
}

export default Child1;

• 状态提升：适合需要父组件共享输入值、或后续有其他组件需要使用该状态的场景，是React状态管理的标准实践。
• CSS隐藏：适合仅需单纯控制显示隐藏、不需要父组件干预状态的场景，但子组件会始终占用DOM资源。

内容的提问来源于stack exchange，提问作者Ae Leung