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

Question

我正在参加react-native 的在线课程，我对讲师使用的参数传递练习感到好奇。

讲师有一个内容数组DATA，其中每个元素都是SomeModel 类的一个实例。当从AScreen 导航到BScreen 时，他通过将有效SomeModel 对象的id 作为参数BScreen 提供它作为props.navigation.navigate() 方法的参数来传递它。然后，他在定义BScreen 的文件中导入相同的DATA 数组，并在DATA 上使用find() 方法来检索相关对象。 （即使用通过props.navigation.getParam()方法获得的ID）

作为AScreen，触发导航的特定按钮也可以访问DATA以及特定对象（即，每个有效对象都有一个按钮对应，并且按钮在FlatList内呈现）我想知道他为什么选择只传递 id，而不是整个对象作为导航的参数。那么整个相关对象可以在BScreen 中使用与获取id 相同的getParam() 调用来获取，并且不需要调用find() 方法，节省了一些时间。我认为 JavaScript 会通过引用传递相关的 SomeModel 实例，并且将更大的对象作为参数传递不会产生额外的开销，而不仅仅是 id。

我这样想有错吗？是否有我忽略的开销来源？如果不是，出于某种原因，单独传递 ID 是否是最佳实践，如果是，为什么？ react-navigation 的机制有什么特别之处吗？

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

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);

AScreen.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>
    );
}

Answer 1

简短的回答是您的想法是正确的，但是当您查看细节时，您会发现当涉及 API 时，您建议的方法不适用于现实世界的示例。

• 场景 1：您有一个显示在平面列表中的本地对象数组，并且您有一个 onpress，它会将您带到下一个屏幕并传递 Id。讲师可能会采用这种方法来解释您将在现实世界的应用程序中做什么，即获取下一个屏幕所需的数据。
• Scnario 2 ：您将对象作为一个整体传递，这带来了优势，因为下一个屏幕将是一个愚蠢的组件，它只会根据传递的数据显示内容。正如您所要求的那样，在本地阵列上工作得很好。
• 场景 3：您使用 api 获取项目列表并在单独的页面中显示单个项目的详细信息，如果您带来第二个屏幕所需的所有数据，则需要更多的网络带宽和更多的处理能力服务器，它会将更多内容加载到移动设备的内存中。并且用户可能根本不会单击所有项目，因此您带来的字段将是一种浪费。因此，下一个屏幕将获取 id 并从服务器请求更多数据。
• 场景 4：考虑一个小类对象列表，其中只有两个或三个从 API 获得的字段，在这种情况下，如果第二个屏幕不需要更多数据，我们可以像场景 2 一样传递对象.

这一切都取决于您的应用程序设计、您正在处理的数据类型以及您的组件需要多少数据。 正如您所提到的，您的讲师采用这条路径向您展示了如何完成事情的示例。如果他向您展示了您建议的方式，并且给您一个场景来获取更多数据，您将不得不找到一种方法来做到这一点。他可能正在使用他的本地数组表示一个 API。您必须就您采取的方法做出决定。