React子组件动态渲染疑问：visibility属性是否使用不当？

你使用visibility属性的方式确实无法实现预期效果——visibility: hidden仅控制元素的视觉可见性，对应的React组件依然会被完整渲染到DOM中，组件内部的生命周期钩子（比如useEffect）和API调用都会正常执行，这就是默认状态下三个子组件API全部触发的原因。

核心原因 #

visibility是CSS层面的属性，它不会从DOM中移除元素，也不会阻止React组件的初始化流程。只要JSX代码中包含了<MyComponentX>，React就会执行该组件的构造、渲染、副作用逻辑，完全不受视觉可见性的影响。

正确解决方案：条件渲染 #

要实现“仅点击对应链接时才渲染子组件并触发API”的需求，必须使用条件渲染——只有当对应状态为true时，才渲染该子组件。未激活的组件不会被初始化，自然不会触发内部的API调用。

示例代码：

<div id="parent">
    {isComp1 && <MyComponent1 {...props} />}
    {isComp2 && <MyComponent2 {...props} />}
    {isComp3 && <MyComponent3 {...props} />}
</div>

可选优化：结合懒加载（针对大体积组件） #

如果子组件体积较大，可配合React懒加载实现代码分割，减少初始页面加载体积：

// 先定义懒加载组件
const MyComponent1 = React.lazy(() => import('./MyComponent1'));
const MyComponent2 = React.lazy(() => import('./MyComponent2'));
const MyComponent3 = React.lazy(() => import('./MyComponent3'));

// 渲染时处理加载状态
<div id="parent">
    {isComp1 && (
        <React.Suspense fallback={<div>加载中...</div>}>
            <MyComponent1 {...props} />
        </React.Suspense>
    )}
    {isComp2 && (
        <React.Suspense fallback={<div>加载中...</div>}>
            <MyComponent2 {...props} />
        </React.Suspense>
    )}
    {isComp3 && (
        <React.Suspense fallback={<div>加载中...</div>}>
            <MyComponent3 {...props} />
        </React.Suspense>
    )}
</div>

注意事项 #

不要尝试用display: none替代visibility，它同样只是控制元素显示/隐藏，不会卸载组件，API依然会被触发。只有条件渲染能彻底解决你的问题。

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