Javascript 反应本机奇数行为以呈现平面列表

我的目标是一次性渲染20个项目，而不是渲染10个项目，并在600毫秒后重新渲染20个项目

我确保只在抓取完成后渲染平面列表。我依赖于

React。使用effect

和

数据

依赖项重新渲染，以模拟效果

在向下滚动时加载更多。行为是相同的，向下滚动时，它会重新渲染整个平面列表，并每10个项目重新渲染一次

console.log

[Tue Sep 15 2020 08:31:56.797]  LOG      Album() useEffect()
[Tue Sep 15 2020 08:31:57.510]  LOG      Album() renderItem() render 1
[Tue Sep 15 2020 08:31:57.651]  LOG      Album() renderItem() render 2
[Tue Sep 15 2020 08:31:57.758]  LOG      Album() renderItem() render 3
[Tue Sep 15 2020 08:31:57.851]  LOG      Album() renderItem() render 4
[Tue Sep 15 2020 08:31:58.700]  LOG      Album() renderItem() render 5
[Tue Sep 15 2020 08:31:58.175]  LOG      Album() renderItem() render 6
[Tue Sep 15 2020 08:31:58.272]  LOG      Album() renderItem() render 7
[Tue Sep 15 2020 08:31:58.375]  LOG      Album() renderItem() render 8
[Tue Sep 15 2020 08:31:58.525]  LOG      Album() renderItem() render 9
[Tue Sep 15 2020 08:31:58.654]  LOG      Album() renderItem() render 10
[Tue Sep 15 2020 08:32:04.758]  LOG      Album() renderItem() render 1
[Tue Sep 15 2020 08:32:04.940]  LOG      Album() renderItem() render 2
[Tue Sep 15 2020 08:32:05.106]  LOG      Album() renderItem() render 3
[Tue Sep 15 2020 08:32:05.240]  LOG      Album() renderItem() render 4
[Tue Sep 15 2020 08:32:05.420]  LOG      Album() renderItem() render 5
[Tue Sep 15 2020 08:32:05.530]  LOG      Album() renderItem() render 6
[Tue Sep 15 2020 08:32:05.608]  LOG      Album() renderItem() render 7
[Tue Sep 15 2020 08:32:05.737]  LOG      Album() renderItem() render 8
[Tue Sep 15 2020 08:32:05.885]  LOG      Album() renderItem() render 9
[Tue Sep 15 2020 08:32:05.986]  LOG      Album() renderItem() render 10
[Tue Sep 15 2020 08:32:06.310]  LOG      Album() renderItem() render 11
[Tue Sep 15 2020 08:32:06.920]  LOG      Album() renderItem() render 12
[Tue Sep 15 2020 08:32:06.148]  LOG      Album() renderItem() render 13
[Tue Sep 15 2020 08:32:06.201]  LOG      Album() renderItem() render 14
[Tue Sep 15 2020 08:32:06.280]  LOG      Album() renderItem() render 15
[Tue Sep 15 2020 08:32:06.340]  LOG      Album() renderItem() render 16
[Tue Sep 15 2020 08:32:06.414]  LOG      Album() renderItem() render 17
[Tue Sep 15 2020 08:32:06.457]  LOG      Album() renderItem() render 18
[Tue Sep 15 2020 08:32:06.521]  LOG      Album() renderItem() render 19
[Tue Sep 15 2020 08:32:06.589]  LOG      Album() renderItem() render 20

./src/features/Album/index.js

import React from 'react';

import {
  StyleSheet,
  ActivityIndicator,
  SafeAreaView,
  View,
  TouchableOpacity,
  Text,
  FlatList,
  RefreshControl,
  Animated,
} from 'react-native';

import Swipeable from 'react-native-gesture-handler/Swipeable';

const styles = StyleSheet.create({
  item: {
    paddingVertical: 20,
    paddingHorizontal: 10,
  },
  separator: {
    flex: 1,
    height: 1,
    backgroundColor: '#e4e4e4',
    marginLeft: 10,
  },
  leftActions: {
    backgroundColor: '#388e3c',
    justifyContent: 'center',
    flex: 1, // continue to swipe.
  },
  actionText: {
    color: '#fff',
    fontWeight: '600',
    padding: 20,
  },
  rightActions: {
    backgroundColor: '#dd2c00',
    justifyContent: 'center',
    // flex: 1, // continue to swipe.
    alignItems: 'flex-end',
  },
});

function LeftActions(progress, dragX) {
  // console.log('Album() LeftActions()', progress, dragX)
  const scale = dragX.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  });
  return (
    <View style={styles.leftActions}>
      <Animated.Text style={[styles.actionText, {transform: [{scale}]}]}>
        Add to Cart
      </Animated.Text>
    </View>
  );
}

function RightActions({progress, dragX, onPress}) {
  // console.log('Album() LeftActions()', progress, dragX)
  const scale = dragX.interpolate({
    inputRange: [-100, 0],
    outputRange: [1, 0],
    extrapolate: 'clamp',
  });
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.rightActions}>
        <Animated.Text style={[styles.actionText, {transform: [{scale}]}]}>
          Delete
        </Animated.Text>
      </View>
    </TouchableOpacity>
  );
}

function Item({item, onSwipeFromLeft, onRightPress}) {
  // console.log('Album() Item() render')
  return (
    <Swipeable
      renderLeftActions={LeftActions}
      onSwipeableLeftOpen={onSwipeFromLeft}
      renderRightActions={(progress, dragX) => <RightActions progress={progress} dragX={dragX} onPress={onRightPress} />}

    >
      <View style={[styles.item]}>
        <Text>{`${item.id} ${item.title}`}</Text>
      </View>
    </Swipeable>
  );
}

function Separator() {
  return <View style={styles.separator} />;
}

export default function Album() {
  const [isLoading, setLoading] = React.useState(true);
  const [currentPage, setCurrentPage] = React.useState(1);
  // const [itemPerPage, setItemPerPage] = React.useState(20);
  const itemPerPage = 20;
  const [data, setData] = React.useState([]);
  const [error, setError] = React.useState();

  React.useEffect(() => {
    console.log('Album() useEffect()');
    fetch(
      `http://jsonplaceholder.typicode.com/albums?_start=${
        currentPage * itemPerPage - itemPerPage
      }&_limit=${itemPerPage}`,
    )
      .then((response) => response.json())
      .then((json) => setData((initial) => [...initial, ...json]))
      .catch((e) => setError(e))
      .finally(() => setLoading(false));
  }, [currentPage]);

  // console.log('Album()', data);

  // question: VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 3179.666748046875, "dt": 627, "prevDt": 658}
  const memo = React.useMemo(() => renderItem, [data]);

  function renderItem({item}) {
    console.log('Album() renderItem() render', item.id);
    return (
      <Item
        item={item}
        onSwipeFromLeft={() => alert('swiped from the left')}
        onRightPress={() => alert('pressed right')}
      />
    );
  }

  function handleRefresh() {
    console.log('Album() handleRefresh()');
    setLoading(true);

    // simulate fetch
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }

  function handleLoadMore() {
    // fake limitPage
    if (100 / itemPerPage === currentPage) return;
    console.log('Album() handleLoadMore()');

    setCurrentPage((page) => page + 1);
  }

  return (
    <>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <>
          {error && <Text>{error}</Text>}
          <Text>Album</Text>
          <SafeAreaView>
            <FlatList
              data={data}
              // Is this parameter bad for performance? Put it into perspective, it renders 1,5x more if this parameter is set to half.
              // initialNumToRender={itemPerPage / 2}

              renderItem={memo}
              keyExtractor={(item) =>
                '_' + Math.random().toString(36).substr(2, 9) + item.id
              }
              refreshControl={
                <RefreshControl
                  refreshing={isLoading}
                  onRefresh={handleRefresh}
                />
              }
              onEndReachedThreshold={0.1}
              onEndReached={handleLoadMore}
              ItemSeparatorComponent={Separator}
            />
          </SafeAreaView>
        </>
      )}
    </>
  );
}

从“React”导入React；
进口{
样式表，
活动指示器，
安全区域视图，
看法
可触摸不透明度，
文本，
平面列表，
刷新控制，
有生气的
}从“反应本机”；
从“反应本机手势处理程序/Swipeable”导入Swipeable；
const styles=StyleSheet.create({
项目：{
填充垂直：20，
水平方向：10，
},
分离器：{
弹性：1，
身高:1,，
背景颜色：“#e4”，
边缘左：10，
},
leftActions：{
背景颜色：“#388e3c”，
为内容辩护：“中心”，
flex:1，//继续刷卡。
},
行动文本：{
颜色：“#fff”，
重量：'600'，
填充：20，
},
权利行动：{
背景颜色：“#dd2c00”，
为内容辩护：“中心”，
//flex:1，//继续刷卡。
对齐项目：“柔性端”，
},
});
函数LeftActions（进度、dragX）{
//log（'Album（）LeftActions（）'，progress，dragX）
常量比例=dragX.interpolate({
输入范围：[01100]，
outputRange:[0，1]，
外推：“夹具”，
});
返回(
添加到购物车
);
}
函数RightActions（{progress，dragX，onPress}）{
//log（'Album（）LeftActions（）'，progress，dragX）
常量比例=dragX.interpolate({
输入范围：[-100,0]，
outputRange:[1,0]，
外推：“夹具”，
});
返回(
删除
);
}
函数项（{Item，onsweepfromleft，onRightPress}）{
//log（'Album（）Item（）render'）
返回(
}
>
{`${item.id}${item.title}`}
);
}
函数分隔符（）{
返回；
}
导出默认函数相册（）{
const[isLoading，setLoading]=React.useState（true）；
const[currentPage，setCurrentPage]=React.useState（1）；
//const[itemPerPage，setItemPerPage]=React.useState（20）；
const itemPerPage=20；
const[data，setData]=React.useState（[]）；
const[error，setError]=React.useState（）；
React.useffect（（）=>{
log（'Album（）useffect（）'）；
取回(
`http://jsonplaceholder.typicode.com/albums?_start=${
currentPage*itemPerPage-itemPerPage
}&_limit=${itemPerPage}`，
)
.then（（response）=>response.json（））
.然后（（json）=>setData（（初始）=>[…初始，…json]））
.catch（（e）=>setError（e））
.最后（（）=>setLoading（false））；
}，[currentPage]）；
//log（'Album（）'，data）；
//问题：VirtualizedList：您有一个更新缓慢的大型列表-请确保您的renderItem函数呈现符合React性能最佳实践的组件，如PureComponent、shouldComponentUpdate等。{“contentLength”：3179.666748046875，“dt”：627，“prevDt”：658}
const memo=React.usemo（（）=>renderItem[data]）；
函数renderItem（{item}）{
log（'Album（）renderItem（）render'，item.id）；
返回(
警报（'从左边刷卡'）}
onRightPress={（）=>警报（'pressed right'）}
/>
);
}
函数handleRefresh（）{
log（'Album（）handleRefresh（）'）；
设置加载（真）；
//模拟提取
设置超时（（）=>{
设置加载（假）；
}, 1000);
}
函数handleLoadMore（）{
//假网页
如果（100/itemPerPage==currentPage）返回；
log（'Album（）handleLoadMore（）'）；
setCurrentPage（（第页）=>第+1页）；
}
返回(
{孤岛加载(
) : (
{error&&{error}
专辑
'.'+Math.random（）.toString（36）.substr（2,9）+item.id
}
刷新控制={
}
onEndReachedThreshold={0.1}
onEndReached={handleLoadMore}
ItemSeparatorComponent={Separator}
/>
)}
);
}
平面列表就是这样工作的

Flatlist构建在虚拟化列表的基础上，它只渲染屏幕上可见的项目，并在滚动条上显示，它将自动删除/卸载屏幕外的项目，从而提供处理大型列表的优化方法

但是在您的情况下，如果它总是20，您可以尝试设置
initialNumToRender
，并且大部分情况下这应该是可行的


进一步阅读