Welcher Weg ist besser, ein Objekt an eine Dump-Komponente in Native React zu übergeben?

Question

Betrachten Sie, ich habe eine Dump-Komponente, die zur Anzeige von Benutzerinformationen verwendet wird. Im moment gibt es 2 Möglichkeiten, Benutzerinformationen zu Komponente zu übergeben:

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

Also, welchen Weg soll ich verwenden? Ich werde einige Vor-& Nachteile Liste nach unten, die ich auf 2 Arten wissen:

1)

Profis:

• die Logik sehr einfach zu verstehen ist, gibt es keine „Magie“ Dinge passieren, um die Komponente Anzeige, was Sie in übergeben.

• die Macht des PureComponent durch flache vergleichen & Requisiten Zustand (https://reactjs.org/docs/shallow-compare.html) verwenden kann, so dass die Komponente nur wieder machen bekommt whend benötigt

Nachteile:

• Ich habe vorbei viele Parameter eingeben, wie <UserItem userName={user.name} userEmail={user.email}> (es sei denn, Sie Betreiber Verbreitung verwenden ...user, aber Sie werden alle Objekteigenschaften passieren)

• ich nicht kann Verwenden Sie die Objektmethode in der Komponente. Zum Beispiel hat mein Benutzermodell eine Methode user.totalMoneys(), weil es in meinem Objekt einige faul berechnete Eigenschaften gibt.

2)

Pro:

• Gang sieht einfach aus: <UserItem user={user}>

• können Objektmethode innerhalb UserItem

cons verwenden:

• ich nicht in den Genuss von PureComponent verwenden können, muss ich meine eigenen vergleichen,

Answer 1

ich, was die beste zu gehen, ist die 1, ich sehe oft die Ausbreitung Operator für diese verwendet, btw können Sie Tun Sie dies im Elternteil, um unnötige Stützen zu vermeiden:

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