FlatList 更新单个项目的速度很慢

Question

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

{
  "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;

在这里试试：https://snack.expo.io/@pavermakov/flatlist-with-checkboxes

如您所见，代码中没有什么特别之处。渲染的项目是轻量级的。切换项目应该不会花那么长时间。

我可以做些什么来提高性能？

Answer 1

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

const renderItem = useCallback(
({ 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>
        ), []
)
...

renderItem={renderItem}

您可以在此优化read more 和more here。