reactjs - React Native:为什么 FlatList 会在数据更改时完全重新渲染?
问题描述
感谢您阅读我的问题!几天以来,我一直在努力解决这个问题:每次更改基础数据时,我的 Flatlist 组件都会重新呈现列表中的所有项目。
情况:
- 我有一个 FlatList 组件渲染项目,其中包含一个 TouchableOpacity 对象来切换该项目的收藏状态。
- 如果按下此按钮,我希望仅此特定项目在我的 FlatList 中更改/重新呈现,而不是所有项目。感觉就像我通过调用 setListData 更新状态后,它会重新渲染所有内容。
- 我在更复杂的设置中遇到了这个问题,但能够深入研究这个核心问题。或者这实际上是预期的行为?
代码:
import React, { useState } from "react";
import {
View,
Text,
StyleSheet,
FlatList,
TouchableOpacity,
} from "react-native";
const PlanerScreen = () => {
const [listData, setListData] = useState([
{ id: "1", name: "Banana", isFav: true },
{ id: "2", name: "Apple", isFav: false },
]);
const Item = ({ item, onPressHandler }) => {
console.log(item.name, " rendered");
const color = item.isFav ? "red" : "green";
return (
<View
style={{
flexDirection: "row",
width: "100%",
margin: 10,
}}
>
<Text>{item.name}</Text>
<TouchableOpacity
style={{ width: 100, height: 50, backgroundColor: color }}
onPress={onPressHandler}
/>
</View>
);
};
const favHandler = (id) => {
setListData(
listData.map((item) =>
item.id === id ? { ...item, isFav: !item.isFav } : item
)
);
};
console.log("FlatList rendered");
return (
<View style={{ flex: 1 }}>
<StatusBar style={selectedTheme === "light" ? "dark" : "light"} />
<FlatList
data={listData}
renderItem={({ item }) => (
<Item item={item} onPressHandler={() => favHandler(item.id)} />
)}
keyExtractor={(item) => item.id}
/>
</View>
);
};
export default PlanerScreen;
单击收藏夹切换按钮时的控制台输出:
FlatList rendered
Banana rendered
Apple rendered
FlatList rendered
Banana rendered
Apple rendered
FlatList rendered
Banana rendered
Apple rendered
解决方案
您可以使用React.memo,它是功能组件的替代品shouldComponentUpdate
。它告诉React
何时根据 prev 和 next 属性重新渲染组件。
import React, { useState } from "react";
import {
View,
Text,
StyleSheet,
FlatList,
TouchableOpacity,
} from "react-native";
const styles = StyleSheet.create({
container: {
flex: 1,
}
})
const keyExtractor = (item) => item.id;
const Item = React.memo(({ item, onPressHandler }) => {
console.log(item.name, " rendered");
const color = item.isFav ? "red" : "green";
return (
<View
style={{
flexDirection: "row",
width: "100%",
margin: 10,
}}
>
<Text>{item.name}</Text>
<TouchableOpacity
style={{ width: 100, height: 50, backgroundColor: color }}
onPress={() => onPressHandler(item.id)}
/>
</View>
);
}, (prevProps, nextProps) => {
if (prevProps.item.isFav === nextProps.item.isFav) return true;
return false;
});
const PlanerScreen = () => {
const [listData, setListData] = useState([
{ id: "1", name: "Banana", isFav: true },
{ id: "2", name: "Apple", isFav: false },
]);
const favHandler = (id) => {
setListData(prevState => {
return prevState.map((item) =>
item.id === id ? { ...item, isFav: !item.isFav } : item
)
}
);
}
console.log("### FlatList rendered #####");
return (
<View style={styles.container}>
<FlatList
data={listData}
renderItem={({ item }) => <Item item={item} onPressHandler={favHandler} />}
keyExtractor={keyExtractor}
/>
</View>
);
};
export default PlanerScreen;
推荐阅读
- session - TypeError:RowProxy 类型的对象不是 JSON 可序列化的 - Flask
- javascript - 返回未定义的嵌套函数
- semantic-web - 有哪些技术可以提高使用 BERT 的语义搜索引擎的上下文准确性?
- sql - gorm包的Create方法中如何去掉RETURNING子句?
- python - 使用 os.walk() 过滤文件
- linux - Linux 中的实时调度策略
- azure-devops - 如何从运行构建的拉取请求中访问人工制品?
- python - 致命的 Python 错误:init_fs_encoding: failed to get the Python codec of the filesystem encoding
- node.js - 如何在heroku上为node.js使用画布
- python - 如何在 python 的同一个 shell 中使用脚本导出环境变量?