哪种方式更好地将对象传递给 React Native 中的转储组件？

Posted 2023-02-23

【中文标题】哪种方式更好地将对象传递给 React Native 中的转储组件？

【英文标题】：Which way better to pass object to a Dump Component in React Native?

【发布时间】：2018-05-11 17:31:46

【问题描述】：

假设我有一个转储组件，用于显示用户信息。 将用户信息传递给组件有两种方式：

1):

class UserItem extends PureComponent 
    // pass user's properties
    const 
        userName, userEmail,
     = this.props;
    // same
    render() 
        return (
            <View>
                <Text>userName</Text>
                <Text>userEmail</Text>
            </View>
        );
    

2)：

class UserItem extends PureComponent 
    // pass a user object
    const 
        userName, userEmail,
     = this.props.user;
    // same
    render() 
        return (
            <View>
                <Text>userName</Text>
                <Text>userEmail</Text>
            </View>
        );
    

那么我应该使用哪种方式？我将以两种方式列出我所知道的一些利弊：

1)

优点：

逻辑很容易理解，没有什么“神奇”的事情发生，无论你传入什么组件都会显示。

可以通过浅层比较状态和道具 (https://reactjs.org/docs/shallow-compare.html) 使用 PureComponent 的强大功能，以便组件仅在需要时重新渲染

缺点：

我必须输入很多参数传递，比如<UserItem userName=user.name userEmail=user.email>（除非你使用扩展运算符...user，但你会传递所有对象属性）

我不能在组件内使用对象方法。例如，我的 User 模型有一个方法 user.totalMoneys()，因为我的对象中有一些惰性计算属性。

2)

优点：

通过看起来很简单：<UserItem user=user>

可以在UserItem中使用对象方法

缺点：

我不能使用 PureComponent 的好处，我必须自己比较，

【参考方案1】：

我最好是 1，我经常看到用于此的扩展运算符，顺便说一句，您可以在父级中执行此操作以避免传递无用的道具：

class UserParent extends Component 
    const  uselessProp1, uselessProp2, ...usefullProps  = this.props;
    render() 
        return (
            <View>
                <UserItem ...usefullProps />
            </View>
        );
    

【讨论】：

感谢 Dyo，这是删除多余道具的一种非常聪明的方法。其实，我比较这两种方式的原因是我来自OOP背景，传递整个User对象非常方便（因为在User中，我还定义了一些方法，计算属性等）我只是想知道还有另一种方式组织我的用户的方法，计算的属性？例如我可能有fullname 方法返回lastname + firstname

它适用于对象方法，您可以在 PureComponent 中调用它：<Text> this.props.fullname() </Text> 但您需要访问此函数中使用的道具（在这种情况下您也必须传递姓氏和名字道具)

是的，我想我也可以传递函数。但是在 OOP 中，我通常有一些像这样的惰性计算属性： gist.github.com/tranquan/4d7744f2807cf6fe8457461263109b36 ，所以 mCreateTimeMoment 仅在需要时创建。我想知道我可以在 FP 中做些什么，或者通过 object props 而不是整个 object。谢谢 Dyo

我认为如果您在使用它的文件中导入所需的模块（moment.js），您的 func 会正常工作。