我如何顯示在 React Native 中呈現列表所花費的時間？

Question

我正在生成一個隨機字符串列表並使用 FlatList 在 React Native 中進行渲染，但我還想顯示渲染該列表需要多長時間。 我怎么能在本機反應中做到這一點？

const [list,setList] = useState([]);

  useEffect(()=>{
    let rList=[];
    for(let i=0;i<1000;i++){
      rList =[...rList,Math.random().toString(36).slice(2, 7)]
    }
    console.log((new Date() - start)/86400000);
    setList(rList);
    clearTimeout() 
    
  },[])
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.boldHeader}>Header</Text>
      </View>
      <View style={styles.body}>
          <FlatList 
          data = {list}
          renderItem = {({item})=>(
            <Text>{item}</Text>
          )}
          />

      </View>
    </View>
  );

Answer 1

為Text組件實現onLayout ，以測量渲染列表中第一個文本和最后一個文本之間的時間跨度。

例如，

type IRandomList = string[];
type IDuration = {
  start?: Date;
  end?: Date;
};
const useMeasureDurationCallback = (list: any[]) => {
  const iRef = useRef<number>(0);
  const durationRef = useRef<IDuration>({});
  const [duration, setDuration] = useState<number>();
  const measure = useCallback(() => {
    if (iRef.current === 0) {
      durationRef.current.start = new Date();
    }
    if (iRef.current + 1 === list.length) {
      durationRef.current.end = new Date();
    }
    if (durationRef.current.start && durationRef.current.end) {
      setDuration(durationRef.current.end - durationRef.current.start);
    }
    iRef.current++;
  }, [durationRef, list]);
  return [duration, measure];
};
const TextInANest = () => {
  const [list, setList] = useState<IRandomList>([]);
  const [duration, onLayout] = useMeasureDurationCallback(list);
  useEffect(() => {
    const rList: IRandomList = [];
    for (let i = 0; i < 1000; i++) {
      rList.push(Math.random().toString(36).slice(2, 7));
    }
    setList(rList);
    clearTimeout();
  }, []);
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text>{duration}</Text>
        <Text style={styles.boldHeader}>Header</Text>
      </View>
      <View style={styles.body}>
        <FlatList
          data={list}
          renderItem={({
            item,
            index,
          }: {
            item: IRandomList;
            index: number;
          }) => {
            return <Text onLayout={onLayout}>{item}</Text>;
          }}
        />
      </View>
    </View>
  );
};

試試小吃

Answer 2

const TextInANest = ({data}) => {


 const [duration, setDuration] = useState<number>();
  const [start, setStart] = useState<number>();

  useEffect(() => {
    setStart(Date.now());
  }, []);
  
  useEffect(() => {
    if (start && data.length) {
      setDuration(Date.now() - start);
    }
  }, [data]);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text>{duration}</Text>
        <Text style={styles.boldHeader}>Header</Text>
      </View>
      <View style={styles.body}>
        <FlatList
          data={data}
          renderItem={({item, index}) => <Text>{item}</Text>}
          onEndReached={() => loadMoreData()}
          onViewableItemsChanged={() => measureDuration()}
        />
      </View>
    </View>
  );
};