在反应导航中传递ID与传递对象

I am taking an online course on react-native and I am curious about a parameter passing practice used by the instructor.

The instructor has an array DATA of content each element of which is an instance of SomeModel class. When navigating from AScreen to BScreen, he passes the id of a valid SomeModel object as a parameter BScreen by providing it as a parameter to props.navigation.navigate() method. Then, he imports the the same DATA array in the file defining BScreen, and uses find() method on the DATA to retrieve the relevant object. (i.e., using the ID it obtained through props.navigation.getParam() method)

As AScreen, and the specific button triggering the navigation also have access to DATA as well as the specific object (i.e., there is a button corresponding to each valid object and buttons are rendered within a FlatList) I wonder why he chose to pass only the id, and not the entire object as a parameter to the navigation. Then the entire relevant object could be obtained within BScreen using the same getParam() call that is utilized to get the id, and there would not be a need to call the find() method, saving some time. I thought that JavaScript would pass the relevant SomeModel instance by reference, and there would not be an additional overhead of passing a larger object as a parameter, as opposed to just the id.

Am I incorrect in thinking this? Is there a source of overhead that I am overlooking? If not, is passing the ID alone a best practice for some reason, and if so, why? Is it something particular to the mechanics of react-navigation?

我在下面提供示例代码片段,以帮助提供我上面描述的用例的更具体的图片。

SomeModel.js:

class SomeModel {
    constructor(id, val1, val2, ...) {
        this.id = id;
        this.val1 = val1;
        this.val2 = val2;
        ...
    }
}

data.js:

import SomeModel from 'SomeModel'

export const DATA = [
    new SomeModel('d1', '1234', '5678',...),
    new SomeModel('d2', '1234', '5678',...),
    ...
]

SomeNavigator.js:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import AScreen from 'AScreen';
import BScreen from 'BScreen';

const SomeNavigator = createStackNavigator({
        AScreen: AScreen,
        BScreen: BScreen
});

export default createAppContainer(SomeNavigator);

Screen.js:

import React from 'react';
import { View, FlatList, Button } from 'react-native';
import {DATA} from 'data';

const AScreen = props => {
    return (
        <View>
            <FlatList data={DATA} renderItem={itemData => {
                <Button
                    title='Go to Screen B!'
                    onPress={() => {
                        // There are actual buttons corresponding to SomeClass instances,
                        // but let's assume there is a single button passes a valid ID to an existing object
                        props.navigation.navigate('ScreenB', {dataID: itemData.item.id});
                    }}
                />
            }} />
        </View>
    );
}

BScreen.js:

import React from 'react';
import { View, Text } from 'react-native';
import {DATA} from 'data';

const BScreen = props => {
    const dataID = props.navigation.getParam('dataID');
    const selectedItem = DATA.find(datum => datum.id === dataID);
    return (
        <View>
            <Text> {selectedItem.val1} </Text>
        </View>
    );
}

评论