Créer un site internet

Functionals Components & React Component

 

You'll find your components much easier to reuse and reason about if you divide them into two categories. I call them Container and Presentational components* but I also heard Fat and Skinny, Smart and Dumb, Stateful and Pure, Screens and Components, etc. These all are not exactly the same, but the core idea is similar.  - Dan Abramov -

 

  • Presentational Components use Functional Components, and only concerns the UI.
  • Container Components use Class Components, and concerns state and behavior.

 

Functional or presentational Component :

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

Container Component :
class Welcome extends React.Component {
   render() {
        return <h1>Hello, {this.props.name}</h1>;
   }
}

 

Presentational components focus on the UI rather than behavior, so it's important to avoid using state in presentational components. 

Instead, state should be managed by higher-level "container" components, or via Flux/Redux/etc. Stateless functional components don't support state or lifecycle methods.

Stateless functional components programmatically enforce keeping the component pure.

You're forced to put state management where it belongs: in higher level container components.

 

Functional Components :

  • are concerned with how things look.
  • don't have state.
  • don't have life cycle methods.
  • don't have a this.
  • are pure functions and therefore easy to test.
  • are easier to read and understand.
  • encourage you to keep in mind the best practices.
  • used for presenting static data.
  • can't handle fetching data.
  • have no dependencies on the rest of the app, such as Flux actions or stores.
  • don't specify how the data is loaded or mutated.
  • receive data and callbacks exclusively via props.
  • rarely have their own state (when they do, it's UI state rather than data).
  • are written as functional components unless they need state, lifecycle hooks, or performance optimizations.

  • Examples: Page, Sidebar, Story, UserInfo, List.

 

React or container Component :

  • are concerned with how things work.
  • provide the data and behavior to presentational or other container components.
  • call Flux actions and provide these as callbacks to the presentational components.
  • are often stateful, as they tend to serve as data sources.
  • are usually generated using higher order components such as connect() from React Redux, createContainer() from Relay, or Container.create() from Flux Utils, rather than written by hand.
  • Examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList.

 

Benefits of This Approach :

  • better separation of concerns. You understand your app and your UI better by writing components this way.
  • better reusability. You can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.
  • presentational components are essentially your app's "palette". You can put them on a single page and let the designer tweak all their variations without touching the app's logic. You can run screenshot regression tests on that page.
  • this forces you to extract "layout components" such as Sidebar, Page, ContextMenu and use this.props.children instead of duplicating the same markup and layout in several container components.
 

best practices reactjs