Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2025-12-29 17:39: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 routeKey: string
label: string label: string
name: string name: string
isFocused: boolean isFocused: boolean
img: TabButtonImage img: TabButtonImage
navigation: any navigation: any
}> = ({ routeKey, label, name, isFocused, img, navigation }) => { }>(({ routeKey, label, name, isFocused, img, navigation }) => {
const onPress = () => { const onPress = () => {
const event = navigation.emit({ const event = navigation.emit({
type: 'tabPress', type: 'tabPress',
@ -69,8 +69,7 @@ const BottomTabButton: React.FC<{
</Text> </Text>
</PressableOpacity> </PressableOpacity>
) )
} })
const MemoBottomTabButton = React.memo(BottomTabButton)
const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => { const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => {
return ( return (
@ -87,7 +86,7 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
: route.name : route.name
return ( return (
<MemoBottomTabButton <BottomTabButton
key={route.key} key={route.key}
routeKey={route.key} routeKey={route.key}
label={label} label={label}

26
app/screens/Home.tsx
View File

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

9
app/screens/LibraryAlbums.tsx
View File

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