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 components，Intelligent componentsandDummy components，Stateful componentandPure components，Packaged componentsandMeta componentwait. They are not exactly the same, but they are similar in the core point of view.
- 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 through
- 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 through
propsReceive data and callback function
- There is little use of the
state(if it is used, it is only to maintain UI state, not data state)
- Unless you need to
stateLife cycle function or performance optimization, usually written asFunctional component，
- For example:
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 elements
divLabel, 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 Redux
createContainer, or flux utils
Container.create(), not handwritten
- For example:
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 as
ContextMenu. 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
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 react
setState()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 to
state, life cycle function, or performance optimization. These features can only be used in class components.
Pure and impureIf a component has the same input
propsIn 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 on
stateSo it can be used in the
shouldComponentUpdateIn 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