如何解决反应原生功能组件重新渲染
我是 react-native 的初学者。据我所知,在这种情况下组件会重新渲染。
- 道具改变了
- 状态改变了
- 父组件已更新。
当我再次返回主页面时,AccountPlaylist 页面会重新呈现。但我不知道为什么。
我认为,getPlaylists() 会导致重新渲染。因为
const listener =navigation.addListener('didFocus',()=>{
getPlaylists();
});
但是,它是 PlaylistContext 函数(getPlaylists)。所以,我认为它会影响 playlistContext 状态。但是,AccountPlaylist Page 仅适用于从与 playlistContext 状态无关的其他组件传递的道具播放列表。为什么要重新渲染 AccountPlaylist?请帮帮我T^T。
主页
import React,{ useEffect,useContext } from 'react';
import { Text,Image,StyleSheet,View,TouchableOpacity,SafeAreaView,FlatList } from 'react-native';
import {Context as PlaylistContext} from '../context/PlaylistContext';
import {Context as UserContext} from '../context/UserContext';
import {Context as BoardContext} from '../context/BoardContext';
import {Context as NoticeContext} from '../context/NoticeContext';
import { navigate } from '../navigationRef';
const Imagetake = ({url}) => {
url =url.replace('{w}','100');
url = url.replace('{h}','100');
return <Image style ={{height:'100%',width:'100%'}} source ={{url:url}}/>
};
const MainPage = ({navigation}) => {
const { state,getPlaylists,getPlaylist } = useContext(PlaylistContext);
const { initUser,getMyInfo,getMyPlaylist,getMyCurating,getMyScrab } = useContext(UserContext);
const { getPopularBoard } = useContext(BoardContext);
const { getnotice,setnoticetoken } = useContext(NoticeContext);
console.log('Main Page');
useEffect(()=>{
setnoticetoken();
getPlaylists();
getPopularBoard()
initUser();
getMyInfo();
getMyPlaylist();
getMyCurating();
getMyScrab();
getnotice();
const listener =navigation.addListener('didFocus',()=>{
getPlaylists();
});
return () => {
listener.remove();
};
},[]);
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress = {()=>navigate('Create')}>
<Text>글작성</Text>
</TouchableOpacity>
</View>
<View style={styles.posts}>
<FlatList
data ={state.playlists}
keyExtractor = {playlists => playlists._id}
renderItem = {({item}) => {
return (
<TouchableOpacity onPress={() => { navigate('Selectedplaylist',{id: item._id,object:item}); getPlaylist({id:item._id,postUserId:item.postUserId}) ; }}>
<View style={styles.post}>
<View style ={styles.postcontent}>
{item.image == undefined ?
<Imagetake url={item.songs[0].attributes.artwork.url}></Imagetake> :
<Imagetake url={item.image}></Imagetake>}
</View>
<View style={styles.posthead}>
<TouchableOpacity>
<View style={styles.postheadimage}/>
</TouchableOpacity>
<View style = {styles.postheadtext}>
<View style={styles.row}>
<Text style ={styles.posttitletext}>{item.title}</Text>
</View>
<View style ={styles.row}>
<Text style={styles.posttitletext}>{item.postUser}</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
)
}}
/>
</View>
</View>
</SafeAreaView>
);
};
帐户播放列表页面
import React,{ useContext,useEffect } from 'react';
import { View,Text,FlatList,TouchableOpacity } from 'react-native';
import { Context as PlaylistContext } from '../../context/PlaylistContext';
import { navigate } from '../../navigationRef';
const Imagetake = ({url}) => {
url =url.replace('{w}',width:'100%'}} source ={{url:url}}/>
};
const AccountPlaylist = ({ playList }) => {
const { getPlaylist } = useContext(PlaylistContext);
console.log('AccountPlaylist Page');
return (
<View style={{flex:1,}}>
<FlatList
data ={playList}
keyExtractor = {playlist => playlist._id}
renderItem = {({item}) => {
return (
<TouchableOpacity onPress={()=>{ navigate('Selectedplaylist',postUserId:item.postUserId}) ; }}>
<View style={styles.post}>
<View style ={styles.postcontent}>
<Imagetake url={item.image}></Imagetake>
</View>
<View style={styles.posthead}>
<TouchableOpacity>
<View style={styles.postheadimage}/>
</TouchableOpacity>
<View style = {styles.postheadtext}>
<View style={styles.row}>
<Text style ={styles.posttitletext}>{item.title}</Text>
</View>
<View style ={styles.row}>
<Text style={styles.posttitletext}>{item.postuser}</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
)
}}
/>
</View>
);
};
AccountPlaylist 道具('播放列表')是
result == 'playlist' ? <AccountPlaylist playList={userState.myPlayList}/>
userState 是另一种 Context(userContext) 状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。