将选择是否使用道具/状态在render（）中显示一个组件，每次都会重绘一次？

Question

以下两个等效表现是否明智？第一个示例是否会导致Component1和Component2每次更新MyComponent的道具都会被重新渲染？

import React from 'react'; 
import { connect } from 'react-redux'; 
import { createStructuredSelector } from 'reselect'; 
import { selectShowComponent1, selectShowComponent2 } from './selectors'; 

@connect(createStructuredSelector({ 
    showComponent1: selectShowComponent1, 
    showComponent2: selectShowComponent2, 
})) 
class MyComponent extends React.PureComponent { 
    static propTypes = { 
    showComponent1: React.PropTypes.bool, 
    showComponent2: React.PropTypes.bool, 
    }; 

    render() { 
    const { showComponent1, showComponent2 } = this.props; 
    return (
     <div> 
     {showComponent1 ? (<Component1>shown 1</Component1>) : ''} 
     {showComponent2 ? (<Component2>shown 2</Component2>) : ''} 
     </div> 
    ); 
    } 
} 

export default MyComponent; 

import React from 'react'; 
import { connect } from 'react-redux'; 
import { createStructuredSelector } from 'reselect'; 
import { selectShowComponent1, selectShowComponent2 } from './selectors'; 

@connect(createStructuredSelector({ 
    showComponent1: selectShowComponent1, 
    showComponent2: selectShowComponent2, 
})) 
class MyComponent extends React.PureComponent { 
    static propTypes = { 
    showComponent1: React.PropTypes.bool, 
    showComponent2: React.PropTypes.bool, 
    }; 

    render() { 
    const { showComponent1, showComponent2 } = this.props; 
    return (
     <div> 
     <Component1 renderMe={showComponent1}>shown 1</Component1> 
     <Component2 renderMe={showComponent2}>shown 2</Component2> 
     </div> 
    ); 
    } 
} 

export default MyComponent; 

Answer 1

第一个将重新呈现每一次，而第二个则不会。原因是动态生成的组件（在这种情况下，它们是三态运算符的结果），每次从动态上下文返回时都会得到一个新的键。而这个关键是React在内部用来唯一标识组件的。

所以我相信，如果你给他们明确的键：

{showComponent1 ? (<Component1 key="1">shown 1</Component1>) : ''} 
    {showComponent2 ? (<Component2 key="2">shown 2</Component2>) : ''} 

然后在理论上应该阻止他们正在重新呈现，但是这不是在某些情况下理想的，因为手动分配密钥可能意味着该组件可能不当你真正想要的时候重新渲染。