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

Question

我是 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, StyleSheet, Image, FlatList, TouchableOpacity } from 'react-native';
import { Context as PlaylistContext } from '../../context/PlaylistContext';
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 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', {id: item._id , object:item}); getPlaylist({id:item._id, 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) 状态。