在ES6中编写时，使用React中的props将复杂对象传递给子组件的正确方法是什么？

Question

Now that we have ES6 and can use spread I've seen some people write code like this:

class Parent extends Component {
  ...
  render() {
    return (
      <UserProfile {...this.props.user} onClick={this.doSomething} />
    )
  }
}

This would set each property of user model as a prop on the UserProfile component. The alternative would be something like this:

<UserProfile user={this.props.user} onClick={this.doSomething} />

Is one of these approaches considered the better practice? I know which version I'm leaning towards, but I want to know if the community has already landed on doing it one way or the other.

Answer 1

Few quick inputs -

• Obviously, spread is better for props which are not closely related, apart from the fact that all of them are owned by the same component. A complex object is better suited for grouping tightly coupled/grouped properties together, the best example being style.
• Spread gives most clarity, at a glance, I can look at the propTypes to determine the usage. However if you have a lot of props, you should look at the possibility of grouping some of them together.
• The purpose of the component has a role too. A UserProfile component is very specific and it implies several props related to the profile would be required. In this case, I'd prefer complex object when the data model is easily available/constructible in the parent component. However, if you want to support say appearance or behavior related props, like displayLoginHistory etc, which don't tie in with the data model, it'd be better to use spread to keep coherent props.