react-native - React 原生 flatlist 重新渲染
问题描述
我正在处理一个包含导致昂贵重新渲染的复杂子级的平面列表,我需要对其进行优化,但我无法使用 useMemo 停止重新渲染,请帮助我完成此操作。
这是我的列表代码:
<FlatList
data={thePosts}
extraData={thePosts}
keyExtractor={(item, index) => index.toString()}
removeClippedSubviews={true}
maxToRenderPerBatch={5}
updateCellsBatchingPeriod={30}
initialNumToRender={11}
windowSize={5}
refreshing={isRefreshing}
onRefresh={handleOnRefresh}
onEndReached={isLoading ? () => null : () => getPosts("more")}
onEndReachedThreshold={0.1}
renderItem={memoizedPost}
//renderItem={renderThePost}
ItemSeparatorComponent={renderThePostSep}
ListFooterComponent={renderThePostListFooter}
/>
这里是renderPost:
const renderThePost = (props) => {
let post = props.item;
if (post[0].type == "share") {
return (
<TheSharedPost thePost={post} />
);
} else {
return <ThePost thePost={post} />;
}
};
我试过像这样使用记忆:
const memoizedPost = useMemo(() => renderThePost, []);
现在的问题是,空数组作为 useMemo 参数我认为只接受第一个渲染但不起作用,我尝试使用[item.someProperty]
但我无法识别参数中的项目(项目未定义)
我也使用过 useCallback 但仍然没有运气,发生了很多重新渲染。请帮我解决这个问题。总氮
解决方案
您可以使用React.memo来避免呈现平面列表项
function TheSharedPost(props) {
/* render using props */
}
export default React.memo(TheSharedPost);
function ThePost(props) {
/* render using props */
}
export default React.memo(ThePost);
推荐阅读
- r - 通过 RInno 安装设置 R 闪亮的应用程序到期日期
- python - 如何使 argparse 将其他参数作为参数?
- reactjs - 反应本机 NavigationDrawer navigation.toggleDrawer() 不起作用
- java - 带有过滤器映射的 Spring 安全性 - 过滤器未使用 dispather 标签调用
- ruby-on-rails - 计算 where 子句后的记录
- asp.net-core - Visual Studio 2017 中的新项目创建空解决方案
- html - 如何使用 html 和 css 在中间创建带有徽标的菜单
- swift - Swift:终止 nib 类的应用程序 UITapGestureRecognizer
- arrays - 数组的 Laravel 验证
- javascript - Amazon Cognito JS Authflow 不发送用户迁移密码