Question

最初componentWillMount()将fetch()运行到API端点＆amp;然后将javascript object保存到redux商店。

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

基本上onScroll超过某个点，它将运行相同的fetch() api调用＆amp;抓住一个新的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>
    )
  }
};

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

Answer 1

问题在于你如何创建密钥。您想要的是一个唯一标识该特定节点的键，并且不会更改每个渲染。由于您使用Math.random()作为密钥的一部分，因此每次渲染都会更改密钥，因此请对该节点进行重建。尝试使用postId而不使用随机数。

如何在不重新渲染的情况下将react-native组件附加到视图中？

1 个答案: