有条件地呈现反应组件

对于在其生命周期中的某个点处隐藏的组件，渲染它的最佳方式是什么？ 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> 
    ); 
}

来源

2016-12-24 reggie

如果我们谈论的性能，第一个变体更好，因为'Node'在'DOM'存在，并作出反应只是改变CSS属性，以便显示'Node'。第二个变体是相反的，因为React需要根据最佳实践向/从'DOM'添加/移除节点 - 添加或移除元素总是比仅改变元素可见性慢 –

是的。但是，在页面的第一次渲染（组件未完全渲染时会更快）以及组件的未来使用之间也存在平衡。假设组件是一个子菜单，仅当用户决定在页面上过滤东西时才会显示。大多数用户永远不会这样做。所以对于他们来说，页面会渲染得更快...... – reggie

[如何在ReactJS中有条件加载组件]可能的重复（https://stackoverflow.com/questions/21278299/how-to-load-components-conditionally-in- reactjs） –

用什么方式最适合这种情况下才行。有时它是方法1，有时是方法2.如果你发现它会减慢你的应用程序的速度，那么转换到方法1是很容易的，但是这应该只有当你有条件地渲染很多次时才会发生。当你有组件的引用，那么你想要始终渲染它，这样你就可以访问componentDidMount中的ref，所以你会隐藏它。

如回答here所示，第一种方法更快，但如果条件呈现是更干净的代码，则不会为此进行微观优化。

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

来源

2016-12-24 12:08:07

我会建议去状态值，并有一个基于状态值的条件来决定组件是显示还是隐藏。

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

来源

2017-05-22 18:43:37

有条件地呈现反应组件

回答

相关问题