React父组件卸载时如何保留子组件不卸载？

嘿，这个问题其实挺常见的——React默认的组件挂载/卸载逻辑确实会让父组件卸载时带跑子组件，但我们有几个实用的方案可以绕开这个问题，甚至有取巧的办法，结合你的HOC场景，我给你梳理一下：

方案1：修改高阶组件实现（最贴合你的场景） #

你的核心需求是HOC提供上下文，移除HOC时子组件不要重新挂载。那不如不要真的卸载HOC，而是用状态控制上下文的传递：

• 让HOC内部维护一个enabled状态，控制是否提供有效上下文
• 当你原本要移除HOC时，改为切换这个状态，而不是卸载HOC本身
• 子组件监听上下文变化，只更新UI内容，不会触发卸载/重新挂载

代码示例：

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

const MyContext = createContext(null);

// 改进后的上下文HOC
const ContextProviderHOC = ({ children, enabled }) => {
  // 只有enabled为true时才提供上下文内容
  const contextValue = enabled ? { /* 你的上下文数据 */ } : null;
  
  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
};

const Child = () => {
  const context = useContext(MyContext);
  
  useEffect(() => {
    console.log('Child 挂载完成');
    return () => {
      console.log('Child 被卸载'); // 这个永远不会触发
    };
  }, []);
  
  return (
    <div>
      {context ? '显示带上下文的内容' : '显示无上下文的内容'}
    </div>
  );
};

const App = () => {
  const [enableHOC, setEnableHOC] = useState(true);

  return (
    <div>
      <button onClick={() => setEnableHOC(!enableHOC)}>
        切换上下文HOC
      </button>
      <ContextProviderHOC enabled={enableHOC}>
        <Child />
      </ContextProviderHOC>
    </div>
  );
};

这个方案完全避免了子组件的卸载，完美解决闪屏问题，也是最稳定的方案。

方案2：用React Portals转移子组件DOM #

Portals允许你把组件渲染到父组件DOM节点之外的地方，这样父组件卸载时，子组件的DOM不在父组件的DOM树范围内，自然不会被卸载：

1. 先在HTML里加一个独立的容器：<div id="child-container"></div>
2. 在父组件中用ReactDOM.createPortal把子组件渲染到这个容器
3. 父组件卸载时，子组件的实例和DOM都不受影响

代码示例：

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const Child = () => {
  useEffect(() => {
    console.log('Child 挂载');
    return () => {
      console.log('Child 卸载'); // 父组件卸载时不会触发
    };
  }, []);
  
  return <div>我是子组件</div>;
};

const Parent = () => {
  useEffect(() => {
    return () => {
      console.log('Parent 卸载'); // 正常触发
    };
  }, []);
  
  // 把子组件渲染到外部容器
  return ReactDOM.createPortal(
    <Child />,
    document.getElementById('child-container')
  );
};

注意：子组件依然能接收父组件的props和上下文，完全满足你的HOC需求。

方案3：缓存子组件实例到父组件外部 #

如果不想用Portals，可以把子组件的实例缓存到上层组件的状态或ref中，这样切换父组件时直接复用实例，避免卸载/重新挂载：

代码示例：

import React, { useState, useRef, useEffect } from 'react';

// 用React.memo确保子组件不会无意义重渲染
const Child = React.memo(() => {
  useEffect(() => {
    console.log('Child 挂载');
    return () => {
      console.log('Child 卸载'); // 不会触发
    };
  }, []);
  
  return <div>我是子组件</div>;
});

const App = () => {
  const [showParent, setShowParent] = useState(true);
  // 缓存子组件实例
  const cachedChild = useRef(<Child />);

  return (
    <div>
      <button onClick={() => setShowParent(!showParent)}>
        切换父组件显示
      </button>
      {showParent ? (
        <Parent>{cachedChild.current}</Parent>
      ) : (
        cachedChild.current
      )}
    </div>
  );
};

const Parent = ({ children }) => {
  useEffect(() => {
    return () => {
      console.log('Parent 卸载'); // 正常触发
    };
  }, []);
  
  return <div>我是父组件 {children}</div>;
};

方案4：取巧的批量更新（不推荐生产环境） #

利用React的unstable_batchedUpdates API，把父组件卸载和子组件重新挂载的操作合并，让React跳过子组件的卸载过程。这个方法依赖React内部API，可能在版本迭代中失效，谨慎使用：

代码示例：

import React, { useState, useEffect } from 'react';
import { unstable_batchedUpdates } from 'react-dom';

const Child = () => {
  useEffect(() => {
    console.log('Child 挂载');
    return () => {
      console.log('Child 卸载'); // 大概率不会触发
    };
  }, []);
  
  return <div>我是子组件</div>;
};

const App = () => {
  const [showParent, setShowParent] = useState(true);

  const toggleParent = () => {
    unstable_batchedUpdates(() => {
      // 先卸载父组件，再立即渲染子组件
      setShowParent(false);
      setShowParent(true);
    });
  };

  return (
    <div>
      <button onClick={toggleParent}>切换父组件</button>
      {showParent ? <Parent><Child /></Parent> : <Child />}
    </div>
  );
};

const Parent = ({ children }) => {
  useEffect(() => {
    return () => {
      console.log('Parent 卸载'); // 正常触发
    };
  }, []);
  
  return <div>我是父组件 {children}</div>;
};

内容的提问来源于stack exchange，提问作者Braden Snell