React-Native FlatList ListHeaderComponent 忽略 shouldComponentUpdate答案

【问题标题】：React-Native FlatList ListHeaderComponent ignores shouldComponentUpdateReact-Native FlatList ListHeaderComponent 忽略 shouldComponentUpdate
【发布时间】：2017-09-06 20:11:12
【问题描述】：

在 React-Native 中，使用 FlatList 和 ListHeaderComponent 让我相信 ListHeaderComponent 中的 shouldComponenupdate 函数（尽管已执行）被忽略了。即使我在 shouldComponentUpdate 中返回 false，我的组件也总是会重新渲染。如何阻止 ListHeaderComponent 重新渲染？

<Card>
     <FlatList data={comments}
              ListHeaderComponent={() => <PostHeader navigation={this.props.navigation} post={this.props.post} />}
              style={{flex:1}}
              onRefresh={() => this.props.getPost(mediaId, 'newsfeed', true)}
              refreshing={isRefreshing}
              keyExtractor={(comment) => comment.id}
              removeClippedSubviews={false}
              renderItem={(comment) => <Comment comment={comment.item} /> } />

    <PostComment newComment={newComment}
                 postComment={() => this.props.postComment(newComment.content, mediaId, profile.id)}
                 reset={()=> this.props.resetNewComment}
                 onTextChange={this.props.newCommentTextChanged} />
    {Platform.OS.toLocaleLowerCase() === 'ios' &&
    <KeyboardSpacer />
    }
  </Card>

在 FlatList 之前放置会阻止不需要的行为，但这需要将大量包装在 ScrollView 中，而在使用 FlatList 时我宁愿避免这样做。

【问题讨论】：

你在shouldComponentUpdate的哪个组件中返回false？
抱歉，将更新问题。在 PostHeader 组件中
问题是即使 PostHeader 组件没有重新渲染父组件。这意味着 PostHeader 也会被重新渲染。
当我将 PostHeader 从 FlatList 中取出时，为什么 PostHeader 中的 shouldcomponentUpdate 会成功阻止组件重新呈现？然后它的父级仍然被重新渲染，但 PostHeader 不是。我认为这是防止子组件重新更新的预期行为，即使它们的父组件这样做
在渲染之前添加一个console.log，然后返回查看哪些组件重新渲染。这可以帮助我们理解我的想法。

标签： react-native react-native-flatlist

【解决方案1】：

事实证明，它并没有重新渲染，它正在卸载并安装我的组件，因此：

https://github.com/facebook/react-native/issues/13602#issuecomment-300608431

【讨论】：