微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

反应原生功能组件重新渲染

如何解决反应原生功能组件重新渲染

我是 react-native 的初学者。据我所知,在这种情况下组件会重新渲染。

  1. 道具改变了
  2. 状态改变了
  3. 父组件已更新。

当我再次返回主页面时,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 举报,一经查实,本站将立刻删除。