为什么react钩子不支持纯组件或shouldComponentUpdate函数？
我想实现flatlist的多选功能。我直接在官方网站上修改了这个例子。官方网站地址是：https:/reactnative.cn/docs/flatlist。因为列表中有很多项，所以我想使用shouldComponentUpdate来防止过度呈现项。但是我发现react钩子编写方法不能实现多选，它不能保存选中的状态，但是类编写方法可以实现多选，原因是什么？FlatList项目的源码如下：
import {StyleSheet, Text, TouchableOpacity} from 'react-native';
import React, {Component} from 'react';
class Item extends Component {
shouldComponentUpdate(nextProps, nextState) {
return this.props.selected !== nextProps.selected;
}
render() {
const {title, onSelect, selected, id} = this.props;
console.log(title + ' is render');
return (
<TouchableOpacity
onPress={() => onSelect(id)}
style={[
styles.item,
{backgroundColor: selected ? '#6e3b6e' : '#f9c2ff'},
]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 40,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default Item;编写类的App源码如下：
import React, {Component} from 'react';
import {
View,
FlatList,
StyleSheet,
} from 'react-native';
import Item from '../component/Item';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
class App extends Component {
state = {
selected: new Map(),
};
onSelect = (id) => {
const newSelected = new Map(this.state.selected);
newSelected.set(id, !this.state.selected.get(id));
this.setState({
selected: newSelected,
});
};
renderItem = ({item}) => (
<Item
id={item.id}
title={item.title}
selected={this.state.selected.get(item.id)}
onSelect={this.onSelect}
/>
);
render() {
return (
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={this.renderItem}
keyExtractor={item => item.id}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 40,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;钩子的App源码如下。
import React, {Component, useState} from 'react';
import {
View,
FlatList,
StyleSheet,
} from 'react-native';
import Item from '../component/Item';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const App = () => {
const [selected, setSelected] = useState(new Map());
const onSelect = (id) => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
};
const renderItem = ({item}) => (
<Item
id={item.id}
title={item.title}
selected={selected.get(item.id)}
onSelect={onSelect}
/>
);
return (
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 40,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;回答 2
Stack Overflow用户
发布于 2020-06-17 16:45:11
React.memo是针对shouldComponentUpdate的。以下是官方文档：https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate
Stack Overflow用户
发布于 2020-06-17 16:57:06
阅读FlatList扩展的VritualizedList
当内容滚动出渲染窗口时，不会保留
内部状态。确保在项目数据或外部存储(如Flux、Redux或Relay )中捕获所有数据。
简而言之，试图用shouldComponentUpdate或React.memo优化FlatList项基本上是没有意义的-项不会保留其状态，而是在呈现时重新挂载。即使你在shouldComponentUpdate中使用类组件，这也不会有什么帮助，因为每次渲染你的组件都会被销毁并重新创建。FlatList已经通过只呈现有限数量的项而不是一次呈现整个列表来为您优化性能
https://stackoverflow.com/questions/62424774
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号