我如何在不重新渲染的情况下附加react-native组件以进行查看？

Question

最初， componentWillMount()将对API端点运行fetch() ，然后将javascript object保存到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>
    )
  }
};

有没有解决的办法？ 我以为React不会重新渲染已经渲染的组件，而仅重新渲染那些已更改的组件？ 但是我想在这种情况下，我的组件都是动态的，这意味着它们将被重新渲染。

Answer 1

问题在于您如何创建密钥。 您想要的是一个密钥，该密钥可以一致地唯一标识该特定节点，并且不会更改每个渲染。 由于您将Math.random()用作键的一部分，因此它将在每次渲染时更改键，因此react将重建该节点。 尝试使用postId而不让随机数结尾。