有条件地呈现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

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

    constructor(props){
       //Set some initial condition for display depending on prop or default value
        //Something similar to this: 
        display: props.toDisplay === undefined ? true : props.toDisplay
    } 

    componentDidMount(){
        //update the state depending on the response or change
    } 

    onClick(event){
      //It might depend on someOther component's click action. 
    }

渲染方法只有以下内容：

    render(){
       const toDisplay = this.state.display 
       if(toDisplay && 
        // Component To render
        )
    }

Answer 2

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

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

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