React Hook循环遍历多次，渲染速度很慢

Question

我尝试在地图循环中显示数组。 Filtergroup 是一个非常大的数组。当我点击其中之一 select 时，渲染速度很慢。我该如何解决？（我试过用usememo，没用）

const FilterAccordionItem: React.FC<FilterAccordionItemProps> = (props) => {
const { filterGroup, toggleSelect, selectedSet, ...rest } = props;
const imageSelectMode = filterGroup.selectType === SelectTypeEnum.Image;

const items = useMemo(() => {
    return (
        <VStack py="12px" maxH="400px" pl="3px" overflowY="scroll">
            {filterGroup.conditionList.map((item, idx) => (
                <>
                    {console.log('render  filterGroup filterGroup')}
                    <HStack w="full" alignItems="left" key={idx} my="6px">
                        <Checkbox
                            colorScheme="purple"
                            mr="16px"
                            isChecked={selectedSet.has(item.conditionKey)}
                            onChange={() => toggleSelect(item.conditionKey)}
                        />
                        <Text fontSize="14px" color="darkGray">
                            {item.name}
                        </Text>
                        <Text fontSize="16px" color="gray.500">
                            ({item.total})
                        </Text>
                    </HStack>
                </>
            ))}
        </VStack>
    );
}, [filterGroup, toggleSelect, selectedSet]);
return (
    <AccordionItem ...

Answer 1

问题是您记忆了整个列表。这样，每个状态更改都会导致所有个元素中的 re-rendering 个，而不是 re-rendering 个已更改选择的元素。您应该尝试的是将 map 函数中的代码提取到一个单独的组件中，并用 React.memo 包装该组件。该组件应该接受一个简单的布尔标志，指示是否选择了一个项目，并且只有 re-renders 如果项目的选择已更改。

这是此方法的快速演示。打开控制台，您会看到每次单击按钮时，按照原始方法呈现的所有项目都会得到 re-rendered。优化方法 re-renders 仅那些选择状态已更改的元素。

https://stackblitz.com/edit/Whosebug-71870292

React Hook循环遍历多次，渲染速度很慢

Reacthook loop traversal occurs many times, rendering speed is very slow

reactjs

react-hooks