如何让React组件仅挂载一次？

嘿，我来帮你理清这个问题～

首先咱们得搞明白为什么Auth和Main组件会反复挂载卸载：在你的AuthOrApp组件里，你用了条件渲染(!user.id) ? <Auth /> : <Main />——当user.id的状态变化时，React会把之前渲染的组件（比如Main）完全卸载，然后挂载新的组件（比如Auth）。这是因为React判断这是两个不同类型的元素，没有保留它们的依据，所以会走完整的卸载-挂载流程。

那要怎么让它们只挂载一次呢？核心思路就是让两个组件始终保持挂载状态，只是切换它们的显示/隐藏，而不是直接替换组件。这里有个简单的实现方案：

解决方案：通过样式控制显示隐藏 #

修改AuthOrApp的return部分，同时渲染两个组件，用display属性来控制哪个显示、哪个隐藏：

export default props => {
    // ... 你的其他代码保持不变

    return (
        <>
            <Auth style={{ display: user.id ? 'none' : 'block' }} />
            <Main style={{ display: user.id ? 'block' : 'none' }} />
        </>
    );
}

这样一来，Auth和Main组件在页面初始化时就会完成挂载，后续登录/登出操作只是切换它们的显示状态，不会触发卸载和重新挂载，完美解决你的问题～

额外小提示 #

如果你的Auth或Main组件里有一些依赖显示状态的副作用（比如监听输入、请求数据），可以在组件内部通过接收的显示状态来控制：
比如在Auth组件里：

const Auth = ({ style }) => {
    const isVisible = style.display !== 'none';

    useEffect(() => {
        if (isVisible) {
            // 只有当组件显示时才执行的逻辑，比如初始化表单
        }
    }, [isVisible]);

    return <div style={style}>...</div>;
}

这样即使组件保持挂载，也不会在隐藏时运行不必要的代码。

备注：内容来源于stack exchange，提问作者Bruno Nobre