有条件地渲染一个反应组件答案

【问题标题】：Conditionally rendering a react component有条件地渲染一个反应组件
【发布时间】：2017-05-09 19:07:53
【问题描述】：

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

【问题讨论】：

如果我们谈论性能，第一个变体更好，因为Node 存在于DOM 中，而React 只更改css 属性以显示Node。第二个变体是相反的，因为 React 需要根据最佳实践向/从DOM. 添加/删除节点 - 添加或删除元素总是比仅仅更改元素可见性要慢
是的。但是在页面的第一次渲染（当组件根本不渲染时会更快）和组件的未来使用之间也存在平衡。假设该组件是一个子菜单，仅当用户决定过滤页面上的内容时才显示。大多数用户永远不会这样做。所以对他们来说，页面会渲染得更快……
How to load components conditionally in ReactJS的可能重复

标签： javascript performance reactjs rendering react-dom

【解决方案1】：

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

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

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

【讨论】：

【解决方案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
        )
    }

【讨论】：