请问这两段代码有什么区别

#1

代码一：

{this.state.selectedTab === selectTabData[0] ?
          <ScrollView >
            <ArticleListComp
              contents={this.props.chosen}
              loadData={(value) => {
                this.props.loadChosen(value);
              }}
              navigator={this.props.navigator}
            />
          </ScrollView>
          : null
        }
        {this.state.selectedTab === selectTabData[1] ?
          <ScrollView>
            <ArticleListComp
              contents={this.props.realTime}
              loadData={(value) => {
                this.props.loadRealTime(value);
              }}
              navigator={this.props.navigator}
            />
          </ScrollView>
          : null
        }

代码二：

{this.state.selectedTab === selectTabData[0] ?
          <ScrollView >
            <ArticleListComp
              contents={this.props.chosen}
              loadData={(value) => {
                this.props.loadChosen(value);
              }}
              navigator={this.props.navigator}
            />
          </ScrollView>
          :
          <ScrollView>
            <ArticleListComp
              contents={this.props.realTime}
              loadData={(value) => {
                this.props.loadRealTime(value);
              }}
              navigator={this.props.navigator}
            />
          </ScrollView>
        }
#2

代码二无论如何都有东西展示，代码一有可能显示null

#3

代码一的结果是正常显示，但每次切换的时候控件都会重新加载
代码二的结果是第二个相似子控件始终显示不出来

#4

代码1：因为是内部state，所以切换组件会导致组件卸载，state初始化，所以需要重新渲染。

代码2：只看组件看不出异常。

#5

代码二的问题是因为是相似组件，所以react当成一个了，加个key就行了

#6

你可以换一种写法：

let contents
if (this.state.selectedTab === selectTabData[0]) {
    contents = this.props.chosen
} else {
    contents = this.props.realTime
}
    <ScrollView>
        <ArticleListComp
          contents={contents}
          loadData={(value) => {
            this.props.loadRealTime(value);
          }}
          navigator={this.props.navigator}
        />
      </ScrollView>
#7

效果是一样的
我这个例子优点特殊，需要保存很多当前的状态，所以还是分开写了，thanks