javascript - 在 react 导航中传递 id 与传递对象

Question

我正在 react-native 上在线类(class)我很好奇导师使用的参数传递实践。

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

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

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

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

SomeModel.js:

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

数据.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:您将对象作为一个整体传递，这具有优势，因为下一个屏幕将是一个dumb组件，它只会根据传递的数据显示内容。正如您所要求的，在本地阵列上效果很好。
• 场景 3:您使用 API 获取项目列表并在单独的页面中显示单个项目的详细信息，如果您提供第二个屏幕所需的所有数据，则需要更多的网络带宽和更多的处理能力服务器，它会将更多内容加载到移动设备的内存中。并且用户可能根本不会点击所有项目，因此您带来的字段将是一种浪费。因此，下一个屏幕将从服务器获取 ID 并请求更多数据。
• 场景 4:考虑从 API 获得的只有两个或三个字段的小型类对象列表，在这种场景中，如果第二个屏幕不需要更多数据，我们可以像场景 2 一样传递对象.

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