将对象传递到React Native中的转储组件的方法更好

Question

考虑我有一个转储组件，用于显示用户的信息。有两种将用户信息传递到组件的方法：

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

那么我应该使用哪种方式？我将列出一些专业人士＆amp;我以两种方式知道的缺点：

1）

专利：

• 逻辑非常容易理解，没有发生"魔术"的事情，该组件会显示您传递的任何内容。

• 可以使用浅层比较状态＆amp;props（https://reactjs.org/docs/shallow-compare.html），以便组件只需要重新渲染

cons：

• 我必须输入许多参数，例如<UserItem userName={user.name} userEmail={user.email}>（除非您使用扩展操作员...user，但是您将通过所有对象属性）

• 我无法在组件内使用对象方法。例如，我的用户模型具有方法user.totalMoneys()，因为我的对象中有一些懒惰的属性。

2）

专利：

• 传球看起来很简单： <UserItem user={user}>

• 可以在UserItem内部使用对象方法

cons：

• 我无法使用属属分解的好处，我必须比较自己的

Answer 1

我最好去的是1，我经常看到用于此的传播操作员，顺便说一句，您可以在父母中执行此操作，以避免通过无用的道具：

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