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

How can I append react-native components to view without re-rendering?

本文关键字:组件 react-native 情况下 新渲染      更新时间:2023-09-26

最初,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 不会重新渲染已经渲染的组件,只会重新渲染那些被更改的组件?但我想在这种情况下,我的组件都是动态的,这意味着它们将被重新渲染。

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