2

对，所以我有一个体育应用程序，我只显示每个团队的赛程，如下所示：

export const Fixtures = ({ fixtures }) => {
        console.log('rendering again')
        return (
            <View>
                <Text style={{ fontSize: 17, alignSelf: 'center', fontWeight: '700', marginBottom: 10 }}>
                    Gameweek Fixtures
                </Text>
                <View style={styles.container}>
                    <View>
                        {fixtures.map((match: any) => (
                            <View key={match.home} style={styles.match}>
                            // displaying fixtures here
                            </View>
                        ))}
                    </View>
                </View>
            </View>
        )
    }

我正在为上面的每个团队显示徽标的图像，并且我注意到闪烁以及该组件何时呈现。它呈现在顶部导航视图中。即我单击导航栏中的固定装置，它会显示该组件。

我不喜欢闪烁，所以我试图让它更高效，并决定使用 react.memo

我将上面的内容包裹在 React.memo 中，如下所示：

export const Fixtures = React.memo(({ fixtures }) => {
        console.log('rendering again')
        return (
            <View>
                <Text style={{ fontSize: 17, alignSelf: 'center', fontWeight: '700', marginBottom: 10 }}>
                    Gameweek Fixtures
                </Text>
                <View style={styles.container}>
                    <View>
                        {fixtures.map((match: any) => (
                            <View key={match.home} style={styles.match}>
                            // displaying fixtures here
                            </View>
                        ))}
                    </View>
                </View>
            </View>
        )
    },
(prevProps, nextProps) => {
    console.log(prevProps, nextProps, 'the propss')
    return true // props are not equal -> update the component)
})

但由于某种原因，它没有在组件呈现时记录 console.log，但它确实记录了顶部的行：console.log('rendering again').

为什么不记录？我能做些什么来防止每次渲染时出现这种闪烁？我只想显示灯具，而不是它闪烁，闪烁然后显示它们（在第一次渲染时可能没问题，但不是在随后的每个渲染中）

4

0 回答 0