React Native - 如何优化 FlatList 的 item 的渲染，或者对 extraData 进行非浅比较？答案

【问题标题】：React Native - How to optimize the rendering of FlatList's item, or doing non-shallow comparison on extraData?React Native - 如何优化 FlatList 的 item 的渲染，或者对 extraData 进行非浅比较？
【发布时间】：2021-05-08 20:43:47
【问题描述】：

我正在努力优化我的<FlatList /> 组件，这是我的示例代码：

案例一：

https://snack.expo.io/HrpJli9EE

我正在尝试增加selectedIds中的id数量。
但是，由于上下文中的 selectedIds 不会更改引用，
而<FlatList /> 正在做一个浅显的比较，
因此项目不会使用上下文中的值重新渲染。

案例2：

https://snack.expo.io/wRLNRYAmU

因此，每次按下项目时，我都会尝试创建一个新的对象引用，
（仅从案例 1 的链接更改第 17 行）
现在可以使用新值重新渲染这些项目。
但是，memo() 不适用于 <Item /> 组件，
对于大型列表，这可能会导致负载过重。

所以...

案例1：有没有办法让<FlatList />不和extraData做浅比较？

或者...

案例2：如果item值相同，有什么办法可以防止<Item />组件重新渲染？

即如果我按第一项来增加数字，
由于第二项和第三项的数量没有增加，不应重新渲染
但目前，它们会重新渲染。

感谢任何答案或cmets。

提醒：您可以通过按底部栏中的“编辑器”>启用“面板”>按“LOG”打开控制台面板。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

发现使用 case 2 和 useMemo 而不是 memo 可以减少对未更改项的不必要渲染：

import React, { useContext, useMemo } from 'react';
import { Text, TouchableOpacity } from 'react-native';

import { styles } from './styles';

const Item = ({ item, onPress }) => {
  const { selectedIds } = useContext(AppContext);
  const value = selectedIds[item.id] || 0;
  const onItemPress = () => onPress(item.id, value + 1);

  return useMemo(() => {
    /* You will only see this console log when this item value is updated */
    console.log("render item", item.id, value);
    return (
      <TouchableOpacity onPress={onItemPress} style={styles.item}>
        <Text style={styles.title}>{item.title} {value}</Text>
      </TouchableOpacity>
    );
  }, [value]);
};

【讨论】：