Question

我有一个简单的示例演示了所看到的内容：https://stackblitz.com/edit/lit-element-example-3pdnwk?file=index.js。

基本上，当第一个子元素呈现时，text属性已正确设置。但是在第二个渲染中，text属性首先是undefined，然后更新为正确的值。

这打破了依靠_firstRendered()为属性分配正确值的可能性。

我真的要在这里做什么吗？

更新：以下是使用lit-html documentation：https://stackblitz.com/edit/lit-element-issue?file=index.js

中提供的类似方法的更好示例。

Answer 1

我真的要在这里做什么吗？

也许？ :)希望您能帮助我了解您为什么选择实现，并且可以对其进行进一步调查。

我坚持的部分是为什么您要在父元素中创建并替换子元素，如下所示：

this._child = html`<child-element text="${text1}"></child-element>`;

据目前为止我了解，该代码使用lit-html辅助函数来创建lit-html TemplateResult。然后在超时回调中将其替换为另一个

this._child = html`<child-element text="${text2}"></child-element>`;

因此，您的代码创建了一个新的TemplateResult并将其重绘，而不是仅重绘已更改的内容（字符串）。正如您指出的那样，这还会再次调用子元素构造函数，并使文本节点暂时变得不确定。这是添加到您的impl的控制台输出，以显示何时为父项和子项调用构造函数和渲染函数：

https://stackblitz.com/edit/lit-element-example-ftlbz7?file=index.js

通过检查DOM树，您的示例将生成以下DOM结构：

<parent-element>
  #shadow-root
    <div>
      <child-element>
        #shadow-root
          <div>

假设我需要产生相同的DOM结构并具有相同的文本节点更新以响应超时回调，我可能会在父渲染函数中对其进行处理：

_render({ parenttext }) {
  return html`<div><child-element text="${parenttext}"></child-element></div>`;
}

确保子构造函数仅被调用一次，并且仅实际更改的数据被重绘。

如果我理解正确，那就是设计使用lit-element的方式（将应用程序或元素的渲染表示为其数据的函数）。这样，我们可以依靠浏览器来重新绘制对数据的任何更改。从理论上讲，这应该更快（虽然我还没有测试过）。

此处的代码示例：

https://stackblitz.com/edit/lit-element-example-exrlxw?file=parent-element.js

了解我在测试中缺少的内容，我可以对其进行更多调查。

编辑后添加：

我注意到重写_shouldRender可以防止元素使用未定义的props渲染，从而阻止了元素使用未定义的props渲染，但是它不能解决_firstRendered的问题，_firstRendered仍然在未定义props时触发

_didRender与_render不同，它不是作为ready()的结果而专门调用的；是called from the ready() callback，它是从Polymer's properties-changed mixin继承的。在Polymer中，将元素添加到DOM时将触发_shouldRender。我认为应该在那时初始化属性，所以这仍然很奇怪。

无论如何，这意味着可以创建一个从不渲染的元素（即_firstRendered始终返回false），但是# ll total 132 -rw-r--r--. 1 root root 496 Jun 14 11:41 mpx-debug.h -rw-r--r--. 1 root root 12775 Jun 14 11:41 mpx-dig.c -rw-r--r--. 1 root root 3526 Jun 14 11:41 mpx-hw.h -rwxr-xr-x. 1 root root 65176 Jun 14 14:28 mpx-mini-test -rw-r--r--. 1 root root 40480 Jun 14 11:41 mpx-mini-test.c -rw-r--r--. 1 root root 205 Jun 14 11:41 mpx-mm.h # ./mpx-mini-test XSAVE is supported by HW & OS XSAVE processor supported state mask: 0x1f XSAVE OS supported state mask: 0x1f BNDREGS: size: 64 user: 1 supervisor: 0 aligned: 0 BNDCSR: size: 64 user: 1 supervisor: 0 aligned: 0 no MPX support Aborted (core dumped) # # ./mpx-mini-test | tee -a mpx-mini-test.log # # cat mpx-mini-test.log #仍会触发。大声笑。样本：https://stackblitz.com/edit/lit-element-first-rendered?file=index.js。

老实说，我不确定该怎么做。当我从文档中读了更多内容时，我会在lit-element github上提出一个问题（或者，如果您先到那里，也可以）。

Answer 2

自0.6.0-dev.5起，这不再是问题

没有值的LitElement渲染模板

2 个答案: