javascript - 有条件地渲染一个 react 组件

Question

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

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

或者这个:

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

Answer 1

只选择最适合这种情况的方法。有时是方法 1，有时是方法 2。如果您发现它正在减慢您的应用程序，那么很容易转换为方法 1，但这只有在您有条件地渲染大量时间时才会发生。当您有组件的引用时，您希望始终呈现它，以便您可以访问 componentDidMount 中的引用，因此您可以将其隐藏。

如答案 here 所示，第一种方法更快但如果条件渲染是更清晰的代码，请不要为此进行微优化。

我在我的应用中混合使用了。