React中实现子组件显隐切换并保留其状态

原代码存在两个核心问题：

• useMemo的依赖数组为空，导致MemoizedDropDown只会在组件初始化时计算一次，后续shouldRenderChild.current变化不会触发重新计算，子组件无法被隐藏；
• 即使实现了子组件的卸载/重新渲染，组件卸载后内部state会被销毁，重新渲染时会重置为初始值，无法保留之前的计数。

以下是两种可行的解决方法：

方案一：通过CSS控制显隐（组件不卸载，保留内部状态） #

让子组件始终存在于DOM中，仅通过CSS控制显示/隐藏，这样子组件的内部状态不会丢失。

修改后的父组件代码：

import React, { useState } from 'react';
import DropDown from './DropDown';

function App() {
  const [isHidden, setIsHidden] = useState(false);

  const toggleChildVisibility = () => {
    setIsHidden(!isHidden);
  };

  return (
    <div>
      <button onClick={toggleChildVisibility}>
        Toggle Child Visibility
      </button>
      {/* 通过display属性控制显隐，隐藏时不占用页面空间 */}
      <div style={{ display: isHidden ? 'none' : 'block' }}>
        <DropDown />
      </div>
    </div>
  );
}

export default App;

子组件代码无需修改。

原理：子组件没有被卸载，只是视觉上被隐藏，内部的number状态会一直保留，再次显示时维持之前的计数。

方案二：状态提升到父组件（组件可卸载，状态存于父级） #

如果需要真正卸载子组件以优化性能，可以将子组件的状态移到父组件中管理，子组件通过props接收状态和更新方法，即使子组件被卸载，状态依然保存在父组件内。

修改后的父组件代码：

import React, { useState } from 'react';
import DropDown from './DropDown';

function App() {
  const [showChild, setShowChild] = useState(true);
  const [childNumber, setChildNumber] = useState(0);

  const toggleChildRendering = () => {
    setShowChild(!showChild);
  };

  const incrementNumber = () => {
    setChildNumber(prev => prev + 1);
  };

  return (
    <div>
      <button onClick={toggleChildRendering}>
        Toggle Child Rendering
      </button>
      {showChild && <DropDown number={childNumber} increment={incrementNumber} />}
    </div>
  );
}

export default App;

修改后的子组件代码：

import React from "react";

export default function DropDown({ number, increment }) {
  return (
    <>
      <button onClick={increment}>+</button>
      <div>Child Component{number}</div>
    </>
  );
}

原理：计数状态childNumber由父组件统一管理，子组件仅负责渲染和触发更新动作。即使子组件被卸载，父组件的状态不会丢失，重新渲染时会将最新值传递给子组件。

方案选择建议 #

• 若子组件逻辑简单，无需父组件干预其状态，优先选方案一，实现成本低；
• 若需要卸载子组件节省资源，或父组件需要访问/修改子组件状态，选方案二，符合React状态提升的最佳实践。

内容的提问来源于stack exchange，提问作者Sougata Mukherjee