Javascript FlatList在更新单个项目时速度较慢

在我的应用程序中，我有一个很长的项目列表。以下是单个项目的外观：

{
  "id": "3f05a9a7-3365-49bb-9879-c42b58c0f615",
  "title": "Joviold",
  "description": "adipisicing excepteur mollit occaecat excepteur labore Lorem excepteur proident ad"
}

每个项目都带有一个复选框，可以打开或关闭。我将切换项的ID列表保存在

checkedItems

变量中

问题是，每当我按下列表中的某个项目时，切换都需要几秒钟

代码如下：

import React, { useState } from 'react';
import { Text, View, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
import { Card, Checkbox, Title, Paragraph } from 'react-native-paper';
import data from "./data";

const App = () => {
  const [checkedItems, setCheckedItems] = useState([]);

  const isChecked = (id) => {
    return checkedItems.includes(id);
  };

  const toggleItem = (id) => {
    if (isChecked(id)) {
      setCheckedItems(checkedItems.filter(item => item !== id));
    } else {
      setCheckedItems([...checkedItems, id]);
    }
  };

  return (
    <View style={s.root}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => toggleItem(item.id)}>
            <Card>
              <Card.Content style={s.content}>
                <Checkbox status={isChecked(item.id) ? "checked" : "unchecked"} />

                <View>
                  <Title>
                    {item.title}
                  </Title>

                  <Paragraph>
                    {item.description}
                  </Paragraph>
                </View>
              </Card.Content>
            </Card>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

const s = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
  content: {
    flexDirection: "row"
  }
});

export default App;

import React，{useState}来自“React”；
从“react native”导入{文本、视图、TouchableOpacity、平面列表、样式表}；
从“react National paper”导入{卡片、复选框、标题、段落}；
从“/data”导入数据；
常量应用=（）=>{
const[checkedItems，setCheckedItems]=useState（[]）；
常量已检查=（id）=>{
返回checkedItems.includes（id）；
};
const-toggleItem=（id）=>{
如果（已检查（id））{
setCheckedItems（checkedItems.filter（item=>item！==id））；
}否则{
setCheckedItems（[…checkedItems，id]）；
}
};
返回(
项目id}
renderItem={（{item}）=>(
toggleItem（item.id）}>
{item.title}
{item.description}
)}
/>
);
}
const s=StyleSheet.create({
根目录：{
弹性：1，
背景颜色：“#ecf0f1”，
},
内容：{
flexDirection：“行”
}
});
导出默认应用程序；

在这里尝试一下：

正如您所看到的，代码中没有什么特别之处。呈现的项目是轻量级的。切换一个项目应该不会花那么长时间

---

如何提高性能？

优化的第一种方法是将渲染函数从JSX中取出，并将其包装在useCallback中

const renderItem=useCallback(
（{item}）=>(
toggleItem（item.id）}>
{item.title}
{item.description}
), []
)
...
renderItem={renderItem}

---

您可以在这里进行此优化，并且。

这没有多大帮助。我试图将渲染项目的数量减少到50个。看起来随着列表的增长，它会逐渐变慢。我认为项目的数量不会影响平面列表，因为据我记忆所及，它不会一次呈现所有项目。