Реагируйте на собственные зацепки FlatLıst Вызовите renderItem дважды за каждый рендер - PullRequest
0 голосов
/ 03 мая 2020

У меня есть компонент UIFlatLıst, и я передаю данные из родительского компонента. Когда я вызываю компонент uiflatlist, этот компонент запускается только один из-за памятки. Но внутри всех данных имеется плоский список компонентов renderItem и функция keyExtractor, вызываемая дважды. Почему это происходит?

 const UIFlatLıst = props => {
    const flatListRef = useRef();
    renderRow = (item, index) => {
      console.log('renderRıw run' + index);
      let renderItem;
      switch (item.type) {
        case ComponentTypes.UIText:
          renderItem = <UIText TextItem={item} />;
          break;
        case ComponentTypes.UICarousel:
          renderItem = (
            <Box p={10}>
              <Box flexDirection="row" alignItems="center">
                <ScrollView horizontal={true}>
                  <Combo
                    Click={props.ButtonClick}
                    CarouselItem={item.component}
                    IsDisabled={item.InitiallyDisabled}
                  />
                </ScrollView>
              </Box>
            </Box>
          );
          break;
        default:
          break;
      }
      return renderItem;
    };
    console.log('uiflatlistRndered');
    return (
      <FlatList
        ml={10}
        data={props.MessageList}
        keyExtractor={(item, index) => item.component.UIId + index.toString()}
        ref={flatListRef}
        renderItem={({item, index}) => renderRow(item,index)}
        onContentSizeChange={() =>
          flatListRef.current.scrollToEnd({animated: true})
        }
        onLayout={() => flatListRef.current.scrollToEnd({animated: true})}
        ListFooterComponent={
          props.Isloading && (
            <Box alignSelf="flex-start">
              <Loader />
            </Box>
          )
        }
      />
    );
  };



     export default React.memo(UIFlatLıst, areEqual);
      function areEqual(prevProps, nextProps) {
        if (prevProps.MessageList === nextProps.MessageList) {
          return true;
        }
      }

здесь вывод

  1. renderRıw run0
  2. renderRıw run1

  3. renderRıw run2

  4. renderRıw run3

  5. renderRıw run4

  6. renderRıw run5

  7. UIText. js: 9 текстовых прогонов

  8. UIInput. js: 15 UIInput прогон.

  9. renderRıw run0

  10. renderRıw run1

  11. renderRıw run2

  12. renderRıw run3

  13. renderRıw run4

  14. renderRıw run5

...