Question

对于在其生命周期的某个时刻隐藏的组件，呈现它的最佳方法是什么？ 1）渲染组件，但不显示它（display：none）。 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所示，但如果条件渲染是更清晰的代码，则不会为此进行微优化。

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

Answer 2

我建议使用状态值并根据状态值来确定要显示或隐藏的组件。

    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
        )
    }

有条件地渲染反应组件

2 个答案: