0 

    showScrollToTopView = () => {
        const { showScrollToTopView } = this.state
        const DEVICE_HEIGHT = Dimensions.get('window').height
        if (this.scrolledValue >= 2 * DEVICE_HEIGHT - HEADER_HEIGHT && !showScrollToTopView) {
            this.setState({
                showScrollToTopView: true
            })
        } else if (this.scrolledValue <= DEVICE_HEIGHT - HEADER_HEIGHT && showScrollToTopView) {
            this.setState({
                showScrollToTopView: false
            })
        }
    }

    getKeyExtractor = (item, index) => {
        return `${get(item, '_id', '')}`
    }

    renderFeedCardComponent = ({ item }) => {
        return (
            <CommunityCardComponent
                cardType={'QUESTION_CARD'}
                questionData={item}
                onClickOptions={this.onClickOptions}
                questionPopupOptionsKey={QUESTION_CARD_OPTIONS}
                onLabelPressed={this.onLabelClicked}
            />
        )
    }

<FlatList
                
                            onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: context.scrollYValue } } }], {
                                useNativeDriver: true,
                                listener: ({ nativeEvent }) => {
                                    const yOffsetValue = get(nativeEvent, 'contentOffset.y', 0)
                                    this.scrolledValue = yOffsetValue
                                    {
                                        this.showScrollToTopView()
                                    }
                                    if (getScrolledPosition) {
                                        getScrolledPosition(yOffsetValue)
                                    }
                                }
                            })}
                            refreshControl={
                                <RefreshControl
                                    refreshing={shouldRefresh}
                                    progressViewOffset={HEADER_HEIGHT}
                                    onRefresh={() => {
                                        handleNetworkAvailableEvent(this.onRefresh)
                                    }}
                                />
                            }
                            scrollEventThrottle={16}
                            ref={(ref) => {
                                if (ref) {
                                    this.flatListRef = ref
                                    if (getFlatListRef) {
                                        getFlatListRef(ref)
                                    }
                                    context.addFlatListRef(this.flatListRef, uniqueKey)
                                }
                            }}
                             renderItem={this.renderFeedCardComponent}
                            keyExtractor={this.getKeyExtractor}
                            onMomentumScrollEnd={({ nativeEvent }) => {
                                const { contentOffset } = nativeEvent
                                if (contentOffset.y === 0) {
                                    context.flatListRef.forEach((item) => {
                                        if (item.key !== uniqueKey) {
                                            item.value.scrollToOffset({
                                                offset: 0,
                                                animated: false
                                            })
                                        }
                                    })
                                }
                            }}
                            listKey={moment().valueOf().toString()}
                        />

Whenever my state changes the flatlist render Item is getting called. I have printed some logs while developing. Now I am using key extractor then why is my flatlist render item getting called. Can explain why is this happening.Now whenever my state changes my flatlist render Item is getting called. I have printed some log while doing development.

4

2 回答 2

0

在您的组件中，每次渲染组件时都会重新定义 renderItem 函数（每次更改状态时都会发生这种情况）。您应该在类组件中定义一个函数并在渲染中调用它。

您的平面列表的其他功能道具也是如此（如 keyExtractor、onScroll ...）

于 2021-01-07T14:36:05.513 回答
0

当状态发生变化时，组件会重新渲染。当一个组件重新渲染时，它会再次渲染它的孩子，即使他们的 props 没有改变。因此，如果您有一个组件，例如：

function Component() {
  // Some code
  return <AnotherComponent />
}

AnotherComponent每次状态发生变化时都会渲染Component，即使它没有任何道具。

为了避免在这种情况下重新渲染，您可以使用React.PureComponent。

在某些情况下，您可以使用组合组件来减少渲染：
在以下组件中，App组件AnotherComponent不会在每次重新渲染时Component都重新渲染：

// App.js

<Component>
  </AnotherComponent>
</Component>

但是如果App组件重新渲染，它会Component再次渲染AnotherComponent。

于 2021-01-07T15:26:10.200 回答