![](/img/trans.png)
[英]How do I display/render image from mongoDB with react native?
[英]How do i display the time taken to render a list in react native?
我正在生成一个随机字符串列表并使用 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>
);
为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>
);
};
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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.