2

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

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

或这个：

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

2 回答 2

0

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

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

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

于 2016-12-24T12:08:07.460 回答
0

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

    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 方法只有以下内容：

    render(){
       const toDisplay = this.state.display 
       if(toDisplay && 
        // Component To render
        )
    }
于 2017-05-22T18:43:37.327 回答