Lit简介：基于标准的反应库

其实Lit简介：基于标准的反应库 的问题并不复杂，但是又很多的朋友都不太了解，因此呢，今天小编就来为大家分享Lit简介：基于标准的反应库 的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

在前端JavaScript框架中，LIT是用于被动编程的有趣选择。它引起了开发人员的极大兴趣，但是与其他反应性框架相比，它仍然相对较低。 LIT构建在Mozilla Web组件标准上，优先考虑速度和一系列有用的功能。

Mozilla Web组件标准

要了解点亮，您必须了解Web组件。作为所有主要浏览器支持的浏览器标准，Web组件提供了定义UI组件的一致方法。 Web组件的想法是为开发人员提供浏览器中的一套工具，以满足UI组件的一般需求。在理想的世界中，每个框架，无论是反应，vue还是其他框架，都将位于Web组件层的顶部，为Web开发提供了更一致的一致性。

LIT是一个干净，专注的图书馆，可为使用Web组件的开发人员提供更舒适的体验。它通过生成仅是自定义HTML元素的网络组件来起作用。这些元素可以广泛使用，例如在React中。这是一个基于标准的简单问候部分：

组件的工作和功能如何显而易见，尽管有几个有趣的功能，例如构造函数和影子根源。要注意的主要内容是，Web组件允许您使用浏览器标准定义封装功能，该标准可以直接在Web控制台中运行。

使用点亮开发网络组件

现在，让我们看一下相同的功能，但使用点亮。

LIT还允许我们使用渲染方法返回由HTML函数生成的模板。 HTML函数参数的内容允许您将HTML与可变插值相结合。这类似于JSX和其他模板语法，但是请注意，我们使用$ {}而不是{}，我们使用它来参考组件。

尝试此操作的最简单方法是使用点亮的在线操场。请注意，在此操场上，您需要使用TS（Typescript）切换来使注释起作用。 （此限制仅与操场有关；评论将与构建中的JavaScript合作。）

提高对点亮组件的响应能力

现在，让我们从响应性方面迈出下一步，并使LIT的名称变量交互式。我们将添加一个输入，使我们能够更改名称3——Aninput组件和模板中显示的名称之间的双向绑定。 LIT使它们保持同步。

以下代码仅包含已更改的有意义的部分：

render（）{return html` div input type=\’text\’.value=$ {this.name} @input=$ {this._handlenameInput}占位符=\’type a type a name .\’ /phello，phello，span span $ {this.name} /span！ /p /div`; } _handlenameInput（event: event）{const inputElement=event.target as htmlinputelement; this.name=inputelement.value; }此处的功能与上一个示例相同，但是现在我们拥有一个输入元素和一个处理函数。输入是标准HTML类型文本。它也是标准值属性，但其前缀是LIT的点运算符。点运算符将输入绑定到$ {this.name}，这是使输入值对该变量反应的神奇组件。点运算符告诉点亮，您需要该值的实时JavaScript属性，而不是静态值。这样可以确保LIT可以使输入保持最新，并对值进行任何程序化更改。

@Input属性允许我们将更改处理程序指向我们的_handlenameInput。该函数本身使用标准DOM操作来检索输入元素的值，然后将其分配给.NAME变量。那是双向绑定的另一侧。当用户更改输入中的值时，处理程序会更新此.NAME。 lit可确保无论何处出现。名称都会有一个新的值。

在点亮中使用内部组件状态

这正是我们根据开关的——条件渲染所需的。要实际切换值，我们可以添加一个按钮：

$ {this._showsecretMessage？ html` p class=\’有条件的文本这是秘密消息！ /p`:\’\’/*如果false * /}此按钮代码使用状态变量有条件地显示适当的标签，则无需渲染。这是@Click处理程序的外观：

_toggleSecretMessage（）{this.__showsecretMessage=！this._showsecretmessage;}在这里，我们只是交换状态变量的值，并根据三元显示屏在视图中显示了变化。现在，我们有一个可以显示和隐藏的面板。

渲染点亮

现在，让我们看一下点亮汇集的能力。首先，我们将创建霍比特人列表：

@property（{type: array}）hobbits=[\’frodo baggins\’，\’samwise gamgee\’，\’merry brandybuck\’，\’pippin tover\’];我们在这里而不是状态使用属性，因为我们可以从父级设置此值。接下来，我们想展示我们的霍比特人：

H4奖学金的霍比特人： /h4 $ {this.hobbits this.hobbits.length 0？ html`ul $ {this.hobbits.map（（（（hobbitname））=html`li $ {hobbitname} /li`）} /ul ul`: html` p（在此阵容中列出了没有霍布斯！） /p`} /p`}

如果霍比特人为空，我们会再次使用三元条件操作员显示消息。通过我们的默认数据，我们显示了最著名的霍比特人列表（Bilbo除外）。主要工作是通过在此.hobbits变量上使用地图功能运算符完成的。这使我们可以通过LIT的HTML功能移动每个元素并输出适当的列表项目标签。

使用点亮来拨打API

现在，让我们从中世界切换到Westeros，然后从远程API加载一些字符数据。

首先，我们将创建一个内部状态变量来管理GET承诺：

@State（）私有_CharacterDataPromise: Promise Unknown;接下来，我们将实现一个构造函数，因为当组件首次加载时，我们需要做某事。在这种情况下，我们正在加载数据：

constructor（）{super（）; this._characterdatapromise=this._fetchcharacterdata（）; }在这里，我们调用_fetchcharacterdata函数：

private async _fetchCharacterData（）{const apiurl=\’3https://www.anapioficeandfire.com/api/characters?page=1pageSize=10\’;尝试{const响应=等待提取（apiurl）; if（！wenspy.ok）{抛出新的错误（`API请求失败了STATUS: $ {RESSIONS.STATUS}`）; } const json: array {name: string，culture: string，born: string，aleases: string []}=等待响应响应； json（）; if（json json.length 0）{const artarneTemplates=json.map（（（char）={const displayName=char.name ||（char.aliases char.aliases [0]）||\’unnumed contrace\’; return return html` html` html` li fornd strong $ {displayname} /strong $ { $ {char.culture} /span`:\’} $ {char.born？返回html` ul $ {pramentemplates} /ul`; } else {返回在这些土地中找到的html` pno字符！ /p`; }} catch（error）{console.error（\’无法获取权力的游戏字符data:\’，错误）;返回Promise.resolve（html` p class=\’error-message\’无法召唤字符： $ {error.message} /p`）; }}代码主要是标准JavaScript，除了我们使用LIT\’SHTML函数返回GET结果中每种情况的适当模板标签。但是请注意，实际_fetchcharacterdata功能返回承诺。如果发生错误，它明确地执行此操作，但是在所有情况下，异步函数都会返回承诺。另请注意，分辨方法与HTML函数调用的内容一起调用。

我们在此之前保存了此诺言的手柄。_CharacterDataPromise。保存的句柄使我们能够在主组件模板中智能等待此调用的结果：

从七个王国（或therebouts）: /h4 $ {直到（this._characterdatapromise，html` html` p class=\’loading-message\’s for News for News（加载字符.）。

同样，我们使用直至（）函数等待应许的最终结果。请注意，第二个参数显示了正在等待的内容。

综上所述