angular渲染效率_在Angular中实现无渲染：所有功能，无渲染

angular渲染效率

You probably don’t know this, but as part of my daily routine, I work with both Angular and React. I’m also a big fan of Vue and Svelte, and follow the progress there. In this article, I want to show how to achieve with Angular what are known as renderless components in Vue, and render props in React.

您可能不知道这一点，但是作为日常工作的一部分，我同时使用Angular和React。 我还是Vue和Svelte的忠实粉丝，并关注那里的进展。 在本文中，我想展示如何使用Angular实现Vue中所谓的无渲染组件以及React中的渲染道具。

As the name suggests, renderless components refers to components that don’t render anything; their sole responsibility is to provide reusable functionality. Let’s take the toggle example from this article written in Vue, and convert it to Angular. Here’s the Vue version:

顾名思义，无渲染组件是指什么都不渲染的组件。 他们的唯一责任是提供可重用的功能。 让我们以Vue编写的这篇文章中的toggle示例为例，并将其转换为Angular。 这是Vue版本：

The toggle renderless component is responsible for providing an API for toggling a view. It doesn’t care how the view is structured or styled. We can achieve the same functionality in Angular by using structural directives:

toggle渲染组件负责提供用于切换视图的API。 不在乎视图的结构或样式。 我们可以通过使用结构指令在Angular中实现相同的功能：

使用结构指令 (Using Structural Directives)

A structural directive changes the DOM layout by adding and removing DOM elements (i.e., a view). In addition to that, it also has a powerful feature of providing a context object that is be available to anyone that consumes it.

结构化指令通过添加和删除DOM元素(即view )来更改DOM布局。 除此之外，它还具有强大的功能，即提供一个context对象，供使用它的任何人使用。

Let’s create a toggle structural directive that exposes the API through the context property:

让我们创建一个toggle结构指令，该指令通过context属性公开API：

We’re creating the view and passing the public API we want to expose through the context, which is the second parameter for createEmbeddedView. The neat thing here is that TemplateRef takes a generic which serves as the context type. Modern IDEs like Webstorm will infer it automatically in the template. Let’s use it:

我们正在创建view并传递要通过context公开的公共API，这是createEmbeddedView的第二个参数。 整洁的是， TemplateRef采用了泛型作为context类型。 像Webstorm这样的现代IDE会在模板中自动进行推断。 让我们使用它：

Thanks Webstorm! 😀

感谢Webstorm！ 😀

使用ExportAs (Using ExportAs)

For the second case, let’s use the React official example of render props. Render props provide us with a way to share the state or behavior that one component encapsulates, with other components that need that same state. For example, the following React component tracks the mouse position in a web app:

对于第二种情况，让我们使用渲染道具的React官方示例。 渲染道具为我们提供了一种方法，可以与需要相同状态的其他组件共享一个组件封装的状态或行为。 例如，以下React组件跟踪Web应用程序中的鼠标位置：

We use the children render prop as a a function that exposes the component’s state to any consumer.

我们使用children render prop作为将组件状态暴露给任何使用者的函数。

This technique makes the behavior that we need to share extremely portable. To use that behavior, render a <Mouse> with a render prop, that tells it what to render with the current (x, y) of the cursor:

这种技术使我们需要共享的行为变得极为可移植。 要使用该行为，请使用渲染道具渲染<Mouse> ，该道具告诉它使用光标的当前(x, y)进行渲染的内容：

Let’s create the same functionality with Angular:

让我们使用Angular创建相同的功能：

The MouseComponent isn’t concerned with its content. It exposes its API by using the exportAs property, which tells Angular that we can use this component API in the template:

MouseComponent与其内容MouseComponent 。 它通过使用exportAs属性公开其API，该属性告诉Angular我们可以在模板中使用此组件API：

And that’s all there is to it. We can also use the exportAs technique to create the toggle component we wrote earlier instead of using a structural directive.

这就是全部。 我们也可以使用exportAs技术来创建我们之前编写的toggle组件，而不是使用结构指令。

摘要 (Summary)

I don’t think there is a right or wrong when it comes to using a structural directive or the exportAs feature. The benefits of using structural directives are that we can define an explicit API that we want to expose in the view, and easily control whether to render the view or not. When we still need some portion of view, like in the MouseComponent example, we can use a component and the exportAs feature.

我不认为使用结构性指令或exportAs功能是对还是错。 使用结构指令的好处是我们可以定义一个要在视图中公开的显式API，并轻松控制是否渲染视图。 当我们仍然需要一部分视图时，例如在MouseComponent示例中，我们可以使用组件和exportAs功能。

🚀万一您错过了 (🚀 In Case You Missed It)

Here are a few of my open source projects:

这是我的一些开源项目：

• Akita: State Management Tailored-Made for JS Applications

  秋田 ：为JS应用量身定制的国家管理

• Spectator: A Powerful Tool to Simplify Your Angular Tests

  Spectator ：简化角度测试的强大工具

• Transloco: The Internationalization library Angular

  Transloco ： Angular国际化图书馆

• Forms Manager: The Foundation for Proper Form Management in Angular

  表单管理器 ：Angular中正确表单管理的基础

• Cashew: A flexible and straightforward library that caches HTTP requests

  腰果 ：一个灵活而直接的库，用于缓存HTTP请求

• Error Tailor — Seamless form errors for Angular applications

  错误裁缝 -Angular应用程序的无缝形式错误

And many more!

和许多更多！

Follow me on Medium or Twitter to read more about Angular, Akita and JS!

在 Medium 或 Twitter上 关注我， 以了解有关Angular，Akita和JS的更多信息！

翻译自: https://netbasal.com/going-renderless-in-angular-all-of-the-functionality-none-of-the-render-1b105e001c8a

angular渲染效率