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

【问题标题】：How can I append react-native components to view without re-rendering?如何在不重新渲染的情况下附加 react-native 组件以查看？
【发布时间】：2016-02-19 02:00:41
【问题描述】：

最初componentWillMount() 将运行fetch() 到API 端点，然后将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 不会重新渲染已经渲染的组件，只会重新渲染那些改变的组件？但我想在这种情况下，我的组件都是动态的，这意味着它们将被重新渲染。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

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

【讨论】：