Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2025-12-28 09:19:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

do memoizing better

Browse Source
This commit is contained in:
austinried 2021-07-13 09:46:55 +09:00
parent 38530134fd
commit 13ae61f160
3 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/navigation/BottomTabBar.tsx
View File

@ -32,14 +32,14 @@ const icons: { [key: string]: TabButtonImage } = {
},
}
const BottomTabButton: React.FC<{
const BottomTabButton = React.memo<{
routeKey: string
label: string
name: string
isFocused: boolean
img: TabButtonImage
navigation: any
}> = ({ routeKey, label, name, isFocused, img, navigation }) => {
}>(({ routeKey, label, name, isFocused, img, navigation }) => {
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
@ -69,8 +69,7 @@ const BottomTabButton: React.FC<{
</Text>
</PressableOpacity>
)
}
const MemoBottomTabButton = React.memo(BottomTabButton)
})
const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => {
return (
@ -87,7 +86,7 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
: route.name
return (
<MemoBottomTabButton
<BottomTabButton
key={route.key}
routeKey={route.key}
label={label}

26
app/screens/Home.tsx
View File

@ -10,9 +10,9 @@ import { useAtomValue } from 'jotai/utils'
import React from 'react'
import { ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
const AlbumItem: React.FC<{
const AlbumItem = React.memo<{
album: AlbumListItem
}> = ({ album }) => {
}>(({ album }) => {
const navigation = useNavigation()
return (
@ -34,13 +34,12 @@ const AlbumItem: React.FC<{
</Text>
</PressableOpacity>
)
}
const MemoAlbumItem = React.memo(AlbumItem)
})
const Category: React.FC<{
const Category = React.memo<{
name: string
type: string
}> = ({ name, type }) => {
}>(({ name, type }) => {
const state = albumLists[type]
const list = useAtomValue(state.listAtom)
const updating = useAtomValue(state.updatingAtom)
@ -58,22 +57,21 @@ const Category: React.FC<{
style={styles.artScroll}
contentContainerStyle={styles.artScrollContent}>
{list.map(album => (
<MemoAlbumItem key={album.id} album={album} />
<AlbumItem key={album.id} album={album} />
))}
</ScrollView>
</View>
)
}
const MemoCategory = React.memo(Category)
})
const Home = () => (
<GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
<View style={styles.content}>
<MemoCategory name="Random Albums" type="random" />
<MemoCategory name="Newest Albums" type="newest" />
<MemoCategory name="Recent Albums" type="recent" />
<MemoCategory name="Frequent Albums" type="frequent" />
<MemoCategory name="Starred Albums" type="starred" />
<Category name="Random Albums" type="random" />
<Category name="Newest Albums" type="newest" />
<Category name="Recent Albums" type="recent" />
<Category name="Frequent Albums" type="frequent" />
<Category name="Starred Albums" type="starred" />
</View>
</GradientScrollView>
)

9
app/screens/LibraryAlbums.tsx
View File

@ -10,14 +10,14 @@ import { useAtomValue } from 'jotai/utils'
import React, { useEffect } from 'react'
import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
const AlbumItem: React.FC<{
const AlbumItem = React.memo<{
id: string
name: string
size: number
height: number
artist?: string
coverArtUri?: string
}> = ({ id, name, artist, size, height, coverArtUri }) => {
}>(({ id, name, artist, size, height, coverArtUri }) => {
const navigation = useNavigation()
return (
@ -35,13 +35,12 @@ const AlbumItem: React.FC<{
</View>
</PressableOpacity>
)
}
const MemoAlbumItem = React.memo(AlbumItem)
})
const AlbumListRenderItem: React.FC<{
item: { album: Album; size: number; height: number }
}> = ({ item }) => (
<MemoAlbumItem
<AlbumItem
id={item.album.id}
coverArtUri={item.album.coverArtThumbUri}
name={item.album.name}