admin管理员组

文章数量:1343687

I spend a lot of time thinking about how to best structure things as cleanly as possible in React. Lately I've been getting hung up on whether React containers should do nothing but connect to Redux (or other data - a la Meteor) and render/return a single ponent, or if containers should also be in charge of event-handling as well. So for example, it's a toss-up between these two models:

Model 1

// ThingContainer.js

import Thing from '../ponents/Thing';
export default someHigherOrderFunc(/* map state/data to props */)(Thing)

// Thing.js

export default class Thing extends Component {
  handleClick() { /* ... */ }
  handleMouseEnter() { /* ... */ }
  render() {
    // Other ponents rendered here, both container or presentational
  }
}

Model 2

// ThingContainer.js

class ThingContainer extends Component {
  handleClick() { /* ... */ }
  handleMouseEnter() { /* ... */ }
  render() {
    // Now Thing can be stateless
    return <Thing 
      onClick={this.handleClick}
      onMouseEnter={this.handleMouseEnter}
    />
  }
}

export default someHigherOrderFunc()(ThingContainer)

It almost feels like in model 1, Thing bees its own container in a sense, which I'm not sure I like. Model 2 feels more natural, as ThingContainer is charged with not just dealing with data and Redux, but also handling events, firing off Ajax requests in ponentDidMount, etc. With the first model, if I wanted an Ajax request to be invoked in ponentDidMount, it would have to go in Thing which doesn't seem right.

I'm wondering if there are any particular advantages or pitfalls to either of these approaches, or if it just es down to style/preference.

I spend a lot of time thinking about how to best structure things as cleanly as possible in React. Lately I've been getting hung up on whether React containers should do nothing but connect to Redux (or other data - a la Meteor) and render/return a single ponent, or if containers should also be in charge of event-handling as well. So for example, it's a toss-up between these two models:

Model 1

// ThingContainer.js

import Thing from '../ponents/Thing';
export default someHigherOrderFunc(/* map state/data to props */)(Thing)

// Thing.js

export default class Thing extends Component {
  handleClick() { /* ... */ }
  handleMouseEnter() { /* ... */ }
  render() {
    // Other ponents rendered here, both container or presentational
  }
}

Model 2

// ThingContainer.js

class ThingContainer extends Component {
  handleClick() { /* ... */ }
  handleMouseEnter() { /* ... */ }
  render() {
    // Now Thing can be stateless
    return <Thing 
      onClick={this.handleClick}
      onMouseEnter={this.handleMouseEnter}
    />
  }
}

export default someHigherOrderFunc()(ThingContainer)

It almost feels like in model 1, Thing bees its own container in a sense, which I'm not sure I like. Model 2 feels more natural, as ThingContainer is charged with not just dealing with data and Redux, but also handling events, firing off Ajax requests in ponentDidMount, etc. With the first model, if I wanted an Ajax request to be invoked in ponentDidMount, it would have to go in Thing which doesn't seem right.

I'm wondering if there are any particular advantages or pitfalls to either of these approaches, or if it just es down to style/preference.

• javascript
• reactjs
• redux

Share Improve this question Follow edited Mar 30, 2016 at 18:47 Dan Abramov 268k8686 gold badges416416 silver badges518518 bronze badges asked Mar 30, 2016 at 18:30 ffxsamffxsam 27.8k3434 gold badges100100 silver badges150150 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 16

There is nothing inherently wrong with doing AJAX inside the “presentational-ish” Thing when it’s only a couple of methods, and this ponent is never used in different scenarios anyway. Don’t split behavior from presentation before you’re sure how the behavior changes in different contexts.

That you have this dilemma means your ponent doesn’t need to be reused yet. In this case it doesn’t matter how you split it. Both ways work fine so I’d go for the simpler one (model 1).

Later you may realize that you want to reuse the same look-n-feel but trigger different AJAX calls, or pute the props differently. At this point you may want to remove the event handling from Thing and create several different ThingContainers, each handling events and puting props a little bit differently. This is when separating presentation and behavior bees useful.

本文标签：