主页 / 问题 / 1449146
Accepted
Zhihar
Asked:2022-09-16 19:26:21 +0000 UTC2022-09-16 19:26:21 +0000 UTC

反应：设计一个组件的问题，只有在满足某些条件时才会显示（使用）

  • 772

创建了一个在组件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 (/*отрисовка компонента*/);
}

还是如上所述将所有渲染逻辑留在父组件中？

哪种方法更好？

javascript

0 个回答

  1. Best Answer

    这里没有客观的答案。这一切都取决于几个因素。

    1. 子组件的体积是多少。
    2. 他有条件吗？
    3. 情况多久会改变一次。

    如果组件很大并且还包含大量组件和/或状态，那么通过父级进行条件渲染当然不是最好的解决方案，即使 React 现在速度很快。请记住，在此代码中，每次都会从头开始创建组件。

    {this.state.flag ? <ComponentBottom /> : <></> }

    如果它很大，它甚至会影响 UI 的渲染速度。在这种情况下，请始终在组件内编写条件渲染。

    render() {
    if (!this.props.show)
        return <></>

    return (/*отрисовка компонента*/);
}

    我同意在组件内部编写条件看起来不太好，但在这种情况下，组件不会每次都从头开始创建。在应用程序速度和性能方面，第二种选择在大型组件中更好。

    如果这是一个没有状态的小型 JSX 组件，那么您可以安全地通过三元运算符或通过&&. 顺便说一句，小心操作员&&。

    • 2

相关问题