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

第一种优化方法是将render函数从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。

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

1 个答案: