react 布局容器
Hello everyone! ?
大家好！ ？
This time I’m going to tell you about this very useful pattern in React called the container pattern or container component pattern.
这次我将告诉您有关React中非常有用的模式，称为容器模式或容器组件模式 。
This is one of the first patterns I learned. It helped me a lot to separate problems in smaller ones and solve them one at a time.
这是我学到的第一种模式。 这对我帮助很大，有助于将较小的问题分解为多个问题，并一次解决一个。
Also, it definitely helped make my code much more reusable and self-contained at once.
而且，它绝对有助于使我的代码更易于重用和独立。
It might seem a paradox! How you get your code to be reusable and self-contained at the same time?
可能看起来很矛盾！ 如何使代码同时可重用和自包含？
Well, reusable because you learn to do small dummy (presentational) components that you can re-use a lot.
很好，可重用，因为您学会了做一些小型的(演示性)组件，这些组件可以大量重复使用。
Self-contained because the container, view, or whatever you are using to keep all your logic can easily be detached from one place and attached to any other one without big changes/refactoring in your main app.
之所以是自包含的，是因为可以轻松地将容器，视图或用于保持所有逻辑的任何内容从一个位置分离并附加到任何其他位置，而无需在主应用程序中进行大的更改/重构。
因此，这是一个双赢和秘密的超级大国，您需要尽快获得！ (So this is a win-win and a secret superpower you need to acquire as soon as you can!)
The truth is when you want to do a feature you always start simple and clean.
事实是，当您要进行某项功能时，总是总是简单而干净。
Days pass by and you get to add one more small feature here, one more feature there. You’re making a patch here, a patch there, and your whole code becomes messy and unmanageable.
日子一天天过去，您可以在此处添加一个小功能，在此处添加一个功能。 您在此处制作一个补丁，在此处制作一个补丁，整个代码变得混乱且难以管理。
Trust me, I’ve been there. And I’m still there nowadays! We all are, at a certain point, because programming is a craft. But we can minimize that a lot with practice and with this amazing design pattern.
相信我，我去过那里。 现在我仍然在那里！ 在某种程度上，我们所有人都是因为编程是一种技巧。 但是我们可以通过实践和这种惊人的设计模式将其最小化。
But, what is a design pattern?
但是，什么是设计模式？
01.什么是软件设计模式？ (01. What is a Software Design Pattern?)
A design pattern is nothing more than a general, reusable solution to a commonly occurring problem within a given context in software design. It’s not a finished design that can be transformed directly into source or machine code. It’s a description or template for how to solve a problem that can be used in many different situations.
设计模式无非是针对软件设计中给定上下文中常见问题的通用，可重用的解决方案。 这不是可以直接转换为源代码或机器代码的最终设计。 它是如何解决可在许多不同情况下使用的问题的描述或模板。
Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.
设计模式是形式化的最佳实践，程序员可以在设计应用程序或系统时用来解决常见问题。
You know the MVC software design pattern?
您知道MVC软件设计模式吗？
02.什么是MVC设计模式？ (02. What is the MVC Design Pattern?)
Well, MVC stands for Model-View-Controller. It is an architectural pattern used for developing user interfaces. It divides the application into three interconnected parts.
好吧，MVC代表Model-View-Controller 。 这是用于开发用户界面的体系结构模式。 它将应用程序分为三个相互联系的部分。
Traditionally it was used for desktop GUI (graphical user interfaces). This architecture has become popular for designing web applications and even mobile ones.
传统上，它用于桌面GUI(图形用户界面)。 这种架构已成为设计Web应用程序甚至移动应用程序的流行方法。
Imagine you have a triangle with three vertices: View, Controller, and Model.
假设您有一个带有三个顶点的三角形： View ， Controller和Model 。
The View is what user sees on screen (client side).
视图是用户在屏幕(客户端)上看到的内容。
The User seeing the view can produce changes, can press a button, fulfill a form, press play to see a video, trigger a panoply of stuff together.
看到视图的用户可以进行更改，可以按按钮，填写表格，按播放来观看视频，一起触发一堆东西。
The Controller handles the changes the user promoted and all the logic behind. (It works as a relayer, it does requests and handles everything between the View and the Model.)
控制器处理用户促进的更改以及所有背后的逻辑。 (它充当中继器，它执行请求并处理视图和模型之间的所有操作。)
The Model is the manager. It contains what’s called the business logic, the data. The model receives information from the controller and proceeds to the changes needed. It gives the updates back to the Controller and the View.
模型是经理。 它包含所谓的业务逻辑，即数据。 该模型从控制器接收信息，并进行所需的更改。 它将更新返回给控制器和视图。
React is “a JavaScript library to build user interfaces” (by definition ?). Most of the time you mix and handle the V and part of the C.
React是“用于构建用户界面JavaScript库”(按定义？)。 大多数时候，您会混合使用V和C的一部分。
And that’s this V and this C that we want to separate distinctly from the container pattern.
这就是我们要与容器模式明显分开的V和C。
03.什么是容器模式？ (03. What is the Container Pattern?)
The Container Pattern is a solution to separate quite well the V from the C. Instead of doing only one <Component /> with the logic and the view, you separate it in two: <ComponentContainer /> and <Component />. The former will do all the logical operations needed and promote communication with the business while the latter will be a dummy presentational component that will render whatever his parent Container demands.
容器模式是一种将V与C很好地分开的解决方案。您无需将逻辑和视图只做一个<Component />，而是将它分为两个：<ComponentCon taine r />和＆ lt; Component / >。 前者将执行所需的所有逻辑操作并促进与业务的通信，而后者将是一个虚拟的演示组件，它将呈现其父容器的任何需求。
Presentational components are concerned with how things look. While Container components are concerned with how things work.
表现成分与事物的外观有关。 而Container组件则关注事物的工作方式 。
04.让我们弄脏双手 (04. Let’s get our hands dirty)
Imagine we want to do a Superhero List component that shows some data about them. We’ll fetch the data from an API and we want to display it on screen.
想象一下，我们想做一个超级英雄列表组件，显示有关它们的一些数据。 我们将从API提取数据，并希望将其显示在屏幕上。
Okay, to simulate our Model (database) I’ve created a fake data object. This object contains the info of the super heroes. It also has a fetchFarAwayAPI() function that will return that object.
好的，为了模拟我们的模型(数据库)，我创建了一个伪数据对象。 该对象包含超级英雄的信息。 它还具有fetchFarAwayAPI()函数，该函数将返回该对象。
Then I’ve created a stateful component to fetch the API, save the answer in the state of our component, and render the data in a bootstrap table on the screen.
然后，我创建了一个有状态的组件以获取API，将答案保存在组件的状态中，并将数据呈现在屏幕上的引导表中。
Okay, we’ve totally separated the Controller from the view. This ?is the main idea you should keep in mind about the container pattern.
好的，我们已经将Controller与视图完全分开。 这是关于容器模式应牢记的主要思想。
If you take a thoughtful look we’ve made one component where we fetch data, save it into state, and render it on screen. We’ve mixed the C and the V. Agree?
如果您考虑周全，我们已经制作了一个组件，用于提取数据，将其保存为状态并在屏幕上呈现。 我们混合了C和V。同意吗？
Okay, how do we solve this? Yup! Container Pattern!
好的，我们该如何解决？ 对！ 容器模式！
Follow me!
跟着我！
The first step is to create a Presentational Component, to render the view. This component will receive props and render it. It’s completely dummy. Take a look:
第一步是创建一个Presentational Component，以渲染视图。 该组件将接收道具并进行渲染。 这完全是假的。 看一看：
To handle the Controller (logic) stuff I’ve refactored our old SuperHeroList renaming it to SuperHeroListContainer.
为了处理Controller(逻辑)方面的内容，我重构了旧的SuperHeroList，将其重命名为SuperHeroListContainer。
Okay, we’ve totally separated the Controller from the view and this ?is the main idea you should keep in mind about what’s the container pattern.
好的，我们已经将Controller与视图完全分开，这是您应该牢记什么是容器模式的主要思想。
But…
但…
We can go further and take the row complexity out of the new SuperHeroList Component. How do we do it? Let’s create a new SuperHeroRow Component:
我们可以更进一步，从新的SuperHeroList组件中消除行的复杂性。 我们该怎么做呢？ 让我们创建一个新的SuperHeroRow组件：
What have we done here? We’ve decoupled the row rendering complexity outside of the SuperHeroList Component. We let the former only render the table and invoking the SuperHeroRow to render each one of the rows alone.
我们在这里做了什么？ 我们已经将SuperHeroList组件之外的行渲染复杂性分离了。 我们让前者仅渲染表，并调用SuperHeroRow单独渲染每一行。
We’ve extracted row complexity to another component. Always remember, the container pattern is there (inside SuperHeroListContainer). We’ve just spread the rendering into two parent/child components that are completely dummy and presentational using React preferred way of working: composition!
我们已经将行复杂度提取到另一个组件。 永远记住，容器模式在那里(在SuperHeroListContainer内部)。 我们已经使用React的首选工作方式将渲染分为两个完全是虚拟的和呈现的父/子组件：合成！
You have the freedom to extract responsibilities/complexities into smaller components. That’s how you should work with React! You need to adjust it to what’s best for the app, for the team, for the context you’re in.
您可以自由地将职责/复杂性提取到较小的组件中。 那就是您应该使用React的方式！ 您需要将其调整为最适合应用程序，团队和所处上下文的最佳状态。
Sometimes we can abstract the thing a little bit! I think by now we’re fine but… let’s go a little bit further…
有时，我们可以将其抽象一些！ 我认为目前我们还不错，但是……让我们再进一步一点……
Let’s create a second SuperHeroList this time using a HOC (Higher Order Component).
这次我们使用HOC(高阶组件)创建第二个SuperHeroList。
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
高阶组件(HOC)是React中用于重用组件逻辑的高级技术。 HOC本身不是React API的一部分。 它们是从React的组成性质中出现的一种模式。
Concretely, a higher-order component is a function that takes a component and returns a new component.
具体而言， 高阶组件是接受组件并返回新组件的函数。
The thing here is to refactor our SuperHeroListContainer into a vanilla JavaScript function. This function takes a component (commonly called the WrappedComponent) and returns a new component.
这里的事情是将我们的SuperHeroListContainer重构为普通JavaScript函数。 此函数采用一个组件(通常称为WrappedComponent)并返回一个新组件。
Just check how I’ve done it below:
只需在下面检查我的操作方式即可：
We’ve refactored the <SuperHeroListContainer /> into this function called withContainer. It receives any Component you want to pass thru it and returns a class Component with all the logic inside!
我们已经将<SuperHeroListContainer />重构为名为withContainer的函数。 它接收要传递给它的任何Component，并返回一个类Component，其中包含所有逻辑！
In this case, the abstraction allows us to export multiple kinds of tables or reuse all the logic that we had in the container to invoke multiple/different presentational/dummy components.
在这种情况下，抽象允许我们导出多种类型的表或重用容器中具有的所有逻辑来调用多个/不同的表示/虚拟组件。
That’s how we get self-containment and reusability together ?
那就是我们如何共同实现自我约束和可重用性？
最后但并非最不重要的 (Last But Not Least)
Don’t worry if, at the beginning, you had difficulty determining how to apply the container pattern. It’s an iterative process. With practice, you’ll get there without thinking a lot. It will be intuitive and it will seem at first sight the best approach to almost (90%) anything you do in React.
一开始，如果您在确定如何应用容器模式时遇到困难，请不要担心。 这是一个反复的过程。 通过练习，您将不需花很多时间就能到达那里。 这将是直观的，乍看起来似乎是您在React中几乎(90％)所做的任何事情的最佳方法。
React has a powerful composition model. They recommend using composition instead of inheritance to reuse code between components.
React具有强大的合成模型。 他们建议使用组合而不是继承来在组件之间重用代码。
NOTE: For this article I’ve used Create React App 2.0 with Bootstrap. You can always pull my repo here and do some experimentations later on. You’ll find the two SuperHeroLists and the two examples we’ve done along the article.
注意：对于本文，我已经使用带有Bootstrap的Create React App 2.0。 您可以随时将我的存储库拉到这里 ，稍后再做一些实验。 您将找到本文中完成的两个SuperHeroLists和两个示例。
Keep reading my articles and don’t forget: always Be Strong and Code On!
继续阅读我的文章，不要忘记：永远坚强并编码 ！
参考书目 (Bibliography)
Container Components from Learn React with chantastic;
Learn React具有不可思议的 容器组件 ;
Software design pattern, from wikipedia, the free encyclopedia;
软件设计模式 ，来自维基百科，免费百科全书；
Model-view-controller, from wikipedia, the free encyclopedia;
Model-view-controller ，来自维基百科，免费的百科全书；
Presentational and Container Patterns, by Dan Abramov;
演示和容器模式 ，作者：Dan Abramov；
Thank you very much!
非常感谢你！
evedes, Oct 2018
evedes，2018年10月
翻译自: https://www.freecodecamp.org/news/react-superpowers-container-pattern-20d664bdae65/
react 布局容器
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
