如何在沒有重新渲染的情況下追加react-native組件進行查看？

Question

最初componentWillMount()將運行fetch()到API端點&然後將javascript object保存到redux存儲區。

現在我的問題是，當渲染下一組組件時，它會重新呈現所有組件（意味着由於渲染，屏幕上會出現一些閃光）。

因此，基本上onScroll過去某個點它會運行相同的fetch() API調用&抓住一個新的JavaScript對象列表。然後它通過將每個新的postComponent附加到佈局狀態，從redux存儲庫中獲取數據&循環。

handleScroll (event: Object) { 
    const offset = event.nativeEvent.contentOffset.y; 
    const screenHeight = Dimensions.get('window').height; 
    // Just for dev purposes until I find a proper way of determining half way down screen 
    if(offset >= screenHeight/2){ 
     console.log("Halfway past..."); 
     this.props.FeedActions.fetchFeed(this.props.feed.nextUrl, true); 
    } 

    } 


render() { 
    var feed = this.props.feed; 

    if (!_.has(feed, 'posts')) { 
     return <ActivityIndicatorIOS />; 
    } 

    // Append more posts to state 
    for (var i = 0; i < _.size(feed.posts); i++) { 
     this.state.postComponents.push(
      <PostComponent post={ feed.posts[i] } key={ "post_"+feed.posts[i].postId+Math.random() }/> 
    ); 
    } 

    return ( 
     <ScrollView key={Math.random()} onScroll={this.handleScroll.bind(this)}> 
     { this.state.postComponents } 
     </ScrollView> 
    ) 
    } 
}; 

有沒有辦法解決這個問題？我認爲反應不會重新渲染已經渲染的組件，而只是那些被更改的組件？但我想在這種情況下，我的組件都是動態的，這意味着它們將被重新渲染。

Answer 1

問題在於你如何創建你的密鑰。你想要的是一個唯一標識該特定節點的密鑰，並且不會改變每個渲染。由於您使用Math.random()作爲密鑰的一部分，因此每次渲染都會更改密鑰，因此請重建該節點。嘗試使用不帶隨機數字的postId。