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

Question

我正在上关于react-native的在线课程，并对老师使用的参数传递练习感到好奇。

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

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

我认为这是不正确的吗？我有没有忽略的间接费用来源？如果不是，出于某种原因单独传递ID是否是最佳做法，如果是，为什么？它对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);

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

这全都取决于应用程序的设计，要处理的数据类型以及组件需要多少数据。正如您提到的，您的讲师采用了这条路径，向您展示了如何完成事情的示例。如果他向您展示了您建议的方式，并且为您提供了获取更多数据的方案，那么您将必须找到一种方法来实现它。他可能使用他的本地数组表示API。您将必须决定所采用的方法。