创建了一个在组件ComponentBottom
内部使用的组件ComponentTop
:
// компонент ComponentTop
render() {
return (
<div>
<какие-то элементы />
{this.state.flag ? <ComponentBottom /> : <></> }
</div>
);
}
我有一个新手问题 - 在这种情况下,最好将显示组件的功能添加到组件本身:
// компонент ComponentTop
render() {
return (
<div>
<какие-то элементы />
<ComponentBottom show = {this.state.flag} />
</div>
);
}
// компонент ComponentBottom
render() {
if (!this.props.show)
return <></>
return (/*отрисовка компонента*/);
}
还是如上所述将所有渲染逻辑留在父组件中?
哪种方法更好?
这里没有客观的答案。这一切都取决于几个因素。
如果组件很大并且还包含大量组件和/或状态,那么通过父级进行条件渲染当然不是最好的解决方案,即使 React 现在速度很快。请记住,在此代码中,每次都会从头开始创建组件。
如果它很大,它甚至会影响 UI 的渲染速度。在这种情况下,请始终在组件内编写条件渲染。
我同意在组件内部编写条件看起来不太好,但在这种情况下,组件不会每次都从头开始创建。在应用程序速度和性能方面,第二种选择在大型组件中更好。
如果这是一个没有状态的小型 JSX 组件,那么您可以安全地通过三元运算符或通过
&&
. 顺便说一句,小心操作员&&
。