Display component and container component (by Dan Abramov, developer of Redux)


This article is translated fromPresentational and Container ComponentsThe author of the article isDan Abramov, he is also the author of Redux and create react app.
In the actual development process of using react + Redux technology stack, a very good understanding of the concept of container component and display component is the basis of developing an easy to maintain and reusable react app

In the development of react application, I found an extremely simple development mode. If you’ve been using react for a while, you may have found it.This article has been very goodBut I would like to add a few points.

If you divide components into two categories, you will find that they are easier to reuse and understand. I call these two categoriesContainer type componentsandDisplay componentsBut I’ve also heard of other names, such asBulky componentsandSimple componentsIntelligent componentsandDummy componentsStateful componentandPure componentsPackaged componentsandMeta componentwait. They are not exactly the same, but they are similar in the core point of view.

Display components

  • Care about the presentation of data
  • The interior may contain presentation and container components, and there are usually other DOM elements and their styles
  • let throughthis.props.childrenControl module
  • It does not rely on other files in the app, such as actions or stores in flux
  • Don’t care how the data is loaded and changed
  • Only throughpropsReceive data and callback function
  • There is little use of thestate(if it is used, it is only to maintain UI state, not data state)
  • Unless you need tostateLife cycle function or performance optimization, usually written asFunctional component
  • For example:Page,Sidebar,Story,UserInfo,List

Container type components

  • Care about how data works
  • The interior may contain presentation and container components, but usually there are no DOM elements for itself, except for some for wrapping elementsdivLabel, and there is no style
  • Methods of providing data and operation data for display components and container components
  • Call flux actions and provide actions to the display component in the form of callback function
  • It is usually stateful and exists as a data source
  • Usually byHigher order functionGenerate, for example, react Reduxconnect(), reallycreateContainer, or flux utilsContainer.create(), not handwritten
  • For example:UserPage,FollowersSidebar,StoryContainer,FollowedUserList

In order to clearly distinguish the two components, I put them in different folders

The advantages of this method

  • Separation of concerns. By developing components in this way, you can better understand your app and UI
  • Better reusability. You can use the same presentation components in different data sources, or you can put them into different container components for further reuse
  • Display components are an essential “palette” of your app. You can put them on a separate page and let designers drag and drop their variables without changing the logic of the application. Do a page snapshot regression test on this page
  • This approach forces you to pull out components for layout, such asSidebarPageContextMenu. Then, the existing styles and layouts are introduced through sub components instead of copying and pasting in each container component

Remember, components don’t have to output DOM elements, they just need to provide composition relationships and boundaries between UIs

Make good use of that

When will the container be introduced?

I suggest you build your app with display components first. Finally, you will realize that you have passed too many props to the components in the middle. Some components don’t use these props and just pass them down. And when the underlying components need more data, you have to rewrite all the intermediate components. At this time, we need to introduce some container components. In this way, you can get data and methods from leaf node components, regardless of the components in the middle.

This requires refactoring while developing, so there’s no need to do it right all at once. With the daily application of this mode, you will cultivate a kind of “I should extract a container at this time”, just like you already know when to extract a function. myRedux tutorialMaybe I can help you, too

Other dichotomies

The classification of display component and container component is not very strict, but according to their purpose.

For comparison with previous concepts, these are some related but different dichotomies

  • Stateful and statelessSome components use reactsetState()Some methods are not used. Container components are often stateful, while presentation components are often stateless, which is not an iron rule. Display components can also be stateful, and container components can also be stateless
  • Classes and functionsStarting with react 0.14, components can be declared as either classes or functions. Functional components can be defined more simply, but they also lack some features that can only be used in class components. Some restrictions may be removed in the future, but they still exist today. Since functional components are easier to understand, I suggest you use them as much as possible. Unless you need tostate, life cycle function, or performance optimization. These features can only be used in class components.
  • Pure and impureIf a component has the same inputpropsIn this case, we always output the same result. We call this component pure component. Pure component can be declared as either a class component or a functional component, that is, it can be stateful or stateless. Another important aspect is that pure component does not rely onpropsandstateSo it can be used in theshouldComponentUpdateIn this paper, the performance of the method is optimized by shallow comparison, but there may be many changes in the future.

Display components and container components can be put into any of the above dichotomies. In my opinion, display components are often stateless pure function components, and container components are often stateful pure class components. However, this is not a requirement, but a phenomenon, and I have seen the opposite in some specific scenes.

Don’t take the distinction between display components and container components as dogma. Sometimes there is no need to distinguish between the two. If you’re not sure whether a component is a display component or a container component, maybe it’s not the time to distinguish it, don’t worry too much!


Michael Chan uses one for usgistExplain the above reason

Extended reading

Recommended Today

Third party calls wechat payment interface

Step one: preparation 1. Wechat payment interface can only be called if the developer qualification has been authenticated on wechat open platform, so the first thing is to authenticate. It’s very simple, but wechat will charge 300 yuan for audit 2. Set payment directory Login wechat payment merchant platform( pay.weixin.qq . com) — > Product […]