Javascript 如何在不重新渲染的情况下将本机组件附加到视图中？

最初，

componentWillMount（）

将对

API

端点运行

fetch（）

，然后将

javascript对象

保存到redux存储

现在我的问题是，当渲染下一组组件时，它会重新渲染所有组件（这意味着由于渲染，屏幕上会有一点闪烁）

因此，本质上，

onScroll

经过某个点后，它将运行相同的

fetch（）

api调用并获取一个新的javascript对象列表。然后，它从redux存储中获取数据，并在其中循环，将每个新的postComponent附加到布局状态

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

handleScroll（事件：对象）{
const offset=event.nativeEvent.contentOffset.y；
const screenHeight=维度.get（'window'）。高度；
//只是为了开发的目的，直到我找到一个正确的方法来确定屏幕的一半
如果（偏移量>=屏幕高度/2）{
console.log（“中途…”）；
this.props.FeedActions.fetchFeed（this.props.feed.nextur，true）；
}
}
render（）{
var feed=this.props.feed；
如果（！\有（feed，'posts'））{
返回；
}
//将更多帖子附加到状态
对于（变量i=0；i

---

有办法解决这个问题吗？我想react不会重新渲染已经渲染的组件，只渲染那些已更改的组件？但我想在这种情况下，我的组件都是动态的，这意味着它们将被重新渲染。

问题在于如何创建密钥。您需要的是一个键，该键可以一致地唯一标识特定节点，并且不会更改每个渲染。由于使用

Math.random（）

作为关键帧的一部分，因此每次渲染时它都会更改关键帧，因此react会重建该节点。尝试使用postId，但后面没有随机数

问题在于如何创建密钥。您需要的是一个键，该键可以一致地唯一标识特定节点，并且不会更改每个渲染。由于使用

Math.random（）

作为关键帧的一部分，因此每次渲染时它都会更改关键帧，因此react会重建该节点。尝试使用postId，但后面没有随机数