私はスポーツアプリを持っていて、各チームのフィクスチャを次のように表示しています:
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>
)
}
上記の各チームのロゴの画像を表示していますが、ちらつきに気付き、このコンポーネントがレンダリングされるたびに発生します。上部のナビゲーション ビューでレンダリングされます。つまり、navbar のフィクスチャをクリックすると、このコンポーネントが表示されます。
ちらつきが気に入らないので、パフォーマンスを向上させようとして、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')
.
なぜログに記録されないのですか?すべてのレンダリングでこのちらつきを防ぐにはどうすればよいですか? フィクスチャを表示したいだけで、代わりに点滅し、ちらつき、表示されます(これの最初のレンダリングでは問題ないかもしれませんが、後続のすべてではそうではありません)