Javascript 为什么React.memo没有按预期工作?
好的,我有一个体育应用程序,我只是显示每个队的赛程,如下所示:Javascript 为什么React.memo没有按预期工作?,javascript,reactjs,react-memo,Javascript,Reactjs,React Memo,好的,我有一个体育应用程序,我只是显示每个队的赛程,如下所示: export const Fixtures = ({ fixtures }) => { console.log('rendering again') return ( <View> <Text style={{ fontSize: 17, alignSelf: 'center', fontWeight: '700', ma
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>
)
}
export const Fixtures=({Fixtures})=>{
console.log('再次呈现')
返回(
游戏周赛程
{fixtures.map((匹配:any)=>(
//在这里显示设备
))}
)
}
我正在为上面的每个团队显示徽标的图像,我注意到一个闪烁,当这个组件渲染时。它会在顶部导航视图中渲染。i、 e.我点击导航栏中的固定装置,它显示了该组件
我不喜欢闪烁,所以我试图让它更有效,并决定使用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)
})
export const Fixtures=React.memo({Fixtures})=>{
console.log('再次呈现')
返回(
游戏周赛程
{fixtures.map((匹配:any)=>(
//在这里显示设备
))}
)
},
(prevProps,nextProps)=>{
log(prevProps、nextProps、“the Props”)
return true//道具不相等->更新组件)
})
但由于某些原因,当组件渲染时,它不会记录console.log,但它会记录顶部的一行,上面写着:console.log(“再次渲染”)
为什么不记录?我能做些什么来防止每次渲染时出现这种闪烁?我只想显示设备,而不是闪烁,然后显示它们(在第一次渲染时可能可以,但不是在随后的每个渲染中)您所说的“组件渲染时不记录console.log”是什么意思,它console.log
不记录?