Javascript 获取平面列表正在渲染的组件之一的高度

我目前正在寻找一种更好的方法来获取平面列表正在渲染的组件的高度。目前我正在使用onLayout，它正在工作，但是如果我的数据有n个对象，它会被调用n次。事实上，它被称为n次真的是烦我，我一直认为，必须有一个更好的方式。在获得组件的高度后，我使用useState存储它。不过，我添加了一个条件，以防止将其设置n次，因为设置状态显然会大大降低性能。如果有其他人有更好的方法，请让 我知道

这是我的密码

import React, { useState } from 'react';
import { FlatList } from 'react-native-gesture-handler';
import { View, Text, Dimensions } from 'react-native';
import RedeemableRewardComponent from './components/RedeemableRewardComponent';
import { ScrollListComponentStyle } from './styles';

const windowWidth = Dimensions.get('window').width;

const ScrollListComponent = ({ data, component, horizontal }) => {
  const [measuredHeight, setMeasuredHeight] = useState(0);

  const handleOnLayout = ({ nativeEvent }) => {
    if (measuredHeight == 0) {
      setMeasuredHeight(nativeEvent.layout.height);
    }
  };

  const handleItemSeparatorComponent = () => {
    if (horizontal) {
      return <View style={ScrollListComponentStyle.viewHorizontalStyle} />;
    } else {
      return <View style={ScrollListComponentStyle.viewVerticalStyle} />;
    }
  };


  return (
    <FlatList
      horizontal={horizontal}
      showsHorizontalScrollIndicator={false}
      showsVerticalScrollIndicator={false}
      data={data}
      keyExtractor={(data) => data.id}
      contentContainerStyle={[
        horizontal
          ? ScrollListComponentStyle.flatListContentContainerHorizontalStyle
          : ScrollListComponentStyle.flatListContentContainerVerticalStyle,
      ]}
      ItemSeparatorComponent={handleItemSeparatorComponent}
      snapToInterval={horizontal ? windowWidth - 50 : measuredHeight + 21}
      decelerationRate={0}
      renderItem={({ item }) => (
        <View
          onLayout={handleOnLayout}
          style={ScrollListComponentStyle.viewStyle}
        >
          <RedeemableRewardComponent {...item} header={true} />
        </View>
      )}
    />
  );
};

export default ScrollListComponent;

import React，{useState}来自“React”；
从“反应本机手势处理程序”导入{FlatList}；
从“react native”导入{View，Text，Dimensions}；
从“./components/ReceivableRewardComponent”导入可赎回的RewardComponent；
从“./styles”导入{ScrollListComponentStyle}；
const windowWidth=Dimensions.get（'window'）.width；
常量ScrollListComponent=（{data，component，horizontal}）=>{
常数[measuredHeight，setMeasuredHeight]=useState（0）；
const handleOnLayout=（{nativeEvent}）=>{
如果（测量高度==0）{
设置测量高度（nativeEvent.layout.height）；
}
};
常量handleItemSeparatorComponent=（）=>{
如果（水平）{
返回；
}否则{
返回；
}
};
返回(
data.id}
内容容器样式={[
水平的
？ScrollListComponentStyle.flatListContentContainerHorizontalStyle
：ScrollListComponentStyle.FlatListContentContainerServerTicalStyle，
]}
ItemSeparatorComponent={handleItemSeparatorComponent}
snapToInterval={horizontal？windowWidth-50:measuredHeight+21}
减速率={0}
renderItem={（{item}）=>(
)}
/>
);
};
导出默认滚动列表组件；