react-native - 哪种方式更好地将对象传递给 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>
        );
    }
}

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

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 的好处，我必须自己比较，

Answer 1

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

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