Javascript 有条件地呈现react组件

对于在其生命周期的某个点隐藏的组件，渲染它的最佳方式是什么？ 1） 渲染组件，但不显示它（显示：无）。 2） 仅在需要时渲染组件。 什么对性能更好？如果组件的道具和状态稍后更新，那么让组件存在但隐藏在虚拟DOM中会更好吗

render() {
    return (
        <div style={{display: this.props.visible ? 'block' : 'none'}}>
            <RestofComponentHere />
        </div>
    );
}

render（）{
返回(
);
}

或者这个：

render() {
    if (!this.props.visible) {
        return null;
    }
    return (
        <div>
            <RestofComponentHere />
        </div>
    );
}

render（）{
如果（！this.props.visible）{
返回null；
}
返回(
);
}

选择最适合这种情况的方法。有时是方法1，有时是方法2。如果您发现它会减慢您的应用程序的速度，那么转换为方法1是非常容易的，但只有在您有条件地渲染大量次时才会发生这种情况。当您拥有组件的引用时，您希望始终呈现该引用，以便可以在

componentDidMount

中访问该引用，并将其隐藏

如答案所示，第一种方法速度更快，但如果条件呈现是更干净的代码，则不要为了它而进行微优化

---

我在我的应用程序中使用了一种混合物。

我建议使用状态值，并根据状态值设置一个条件，以决定是显示还是隐藏组件

构造函数（道具）{
//根据道具或默认值为显示设置一些初始条件
//类似于此：
显示：props.toDisplay==未定义？真：props.toDisplay
} 
componentDidMount（）{
//根据响应或更改更新状态
} 
onClick（事件）{
//它可能取决于其他组件的单击操作。
}

渲染方法将只包含以下内容：

render（）{
const toDisplay=this.state.display
如果（显示&&
//要渲染的组件
)
}

如果我们谈论性能，第一个变量会更好，因为

Node

存在于

DOM

中，而React只更改css属性以显示

Node

。第二种变体正好相反，因为React需要根据最佳实践将节点添加到

DOM

，添加或删除元素总是比更改元素可见性慢Yes。但是，在页面的第一次呈现（如果根本不呈现组件，会更快）和组件的未来使用之间也有一个平衡。假设组件是一个子菜单，仅当用户决定过滤页面上的内容时才会显示。大多数用户永远不会这样做。因此，对于他们来说，页面将呈现得更快…可能是