组件之间通信_如何在组件之间通信

组件之间通信

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

“发现功能JavaScript”被BookAuthority评为最佳新功能编程书籍之一 ！

Components are a tool for splitting the page in smaller pieces that are easier to manage and reuse. By breaking the page into smaller parts, we make their implementation simpler.

组件是一种工具 用于将页面分成较小的部分，以便于管理和重复使用。 通过将页面分成较小的部分，我们使它们的实现更简单。

But at the same time this creates a new challenge: the communication between these small parts.

但这同时带来了新的挑战：这些小部件之间的通信。

展示柜 (A showcase)

I’ll take as an example a page managing a list of to-dos. The user is able to see, add, and search for to-dos.

我以管理待办事项列表的页面为例。 用户可以查看，添加和搜索待办事项。

This is how the page looks:

页面外观如下：

识别组件 (Identifying components)

We can split the page in three main components based on their responsibilities:

我们可以根据其职责将页面分为三个主要部分：

• TodoAddForm: the form for adding a new to-do

  TodoAddForm ：用于添加新TodoAddForm的表单

• TodoSearchForm: the form for searching a to-do

  TodoSearchForm ：用于搜索TodoSearchForm的表单

• TodoList: the list for displaying the to-dos

  TodoList ：用于显示待办事项的列表

We can go even further and make every item in the list have its own component: TodoListItem

我们可以更进一步，使列表中的每个项目都有其自己的组件： TodoListItem

For the sake of this analysis, I encapsulate the text-box and button in their own component: FormInput, FormButton.

为了进行分析，我将文本框和按钮封装在它们自己的组件中： FormInput ， FormButton 。

组件在树状结构中 (Components are in a Tree Structure)

Before analyzing how to communicate between components, we need understand that components are organized in a tree structure. If the framework doesn’t force a root component, then we’ll create one.

在分析如何在组件之间进行通信之前，我们需要了解组件是以树结构组织的。 如果框架没有强制使用根组件，那么我们将创建一个。

Now let’s create the tree structure:

现在让我们创建树结构：

展示和容器组件 (Presentation and Container Components)

We can start defining the components’ responsibilities by using the Container and Presentational Pattern.

我们可以使用“容器和表示模式”开始定义组件的职责。

The pattern is described in Presentational and Container Components and Container Components

在演示文稿和容器组件以及容器组件中描述了该模式

The presentation components communicate only through their own properties, methods, and events. They are not connected to external communication objects. This makes presentation components easier to understand and more reusable, as they are not coupled to other objects.

表示组件仅通过它们自己的属性，方法和事件进行通信。 它们未连接到外部通信对象。 由于演示组件没有与其他对象耦合，因此使它们更易于理解和可重用。

The container components are connected to external objects. They listen for events from these objects and do actions. They provide data to the user interface.

容器组件已连接到外部对象。 他们侦听来自这些对象的事件并执行操作。 它们将数据提供给用户界面。

I’ll start with only one root container component: TodoContainer. All the other will be presentation components: TodoAddForm, TodoSearchForm, TodoList, TodoListItem , FormInput and FormButton.

我将仅从一个根容器组件开始： TodoContainer 。 其他所有将是演示文稿组件： TodoAddForm ， TodoSearchForm ， TodoList ， TodoListItem ， FormInput和FormButton 。

There many means for communication at our disposal. In the end, we need to choose the one that’s appropriate for our situation.

我们可以使用多种通讯方式。 最后，我们需要选择适合我们情况的一种。

To sum up, these means of communication are :

总结起来，这些沟通方式是：

• Parent → Child: properties, methods
  父级→子级：属性，方法
• Child → Parent: events, callbacks
  子级→父级：事件，回调

• Child → Child: via parent, domain store, UI store, or global event bus.

  子级→子级：通过父级，域存储区，UI存储区或全局事件总线。

  In short, two child components can communicate using their closest parent or a shared third object.

  简而言之，两个子组件可以使用其最接近的父组件或共享的第三个对象进行通信。

You can find more in the Discover Functional JavaScript book.

您可以在“ 发现功能JavaScript”一书中找到更多信息。

Read Functional Architecture with React and Redux and learn how to build apps in function style.

阅读具有React和Redux的功能架构，并学习如何以函数样式构建应用程序。

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

发现功能JavaScript被称为 BookAuthority最好的新功能编程书籍 ！

For more on applying functional programming techniques in React take a look at Functional React.

有关在React中应用函数式编程技术的更多信息，请查看 Functional React 。

You can find me on Medium and Twitter.

您可以在Medium和Twitter上找到我。

翻译自: https://www.freecodecamp.org/news/how-to-communicate-between-components-b48ef70bf913/

组件之间通信