dropdownlist绑定数据库怎么用 详解dropdownlist控件用法(3)

dropdownlist绑定数据库怎么用

如果绑定数据的元素是常规 HTML 元素，那么将简单地更新其 textContent。在这两种情况下，只需几行代码即可有效实现 DOM 的更新。

列表该怎么处理？

像虚拟 DOM 这样的解决方案真正的用武之地是渲染列表。例如只更改列表的一部分时，虚拟 DOM 将仅更新已更改的部分，而不是重新渲染整个列表。

其机制是在第一次渲染列表时创建 DOM 节点，然后在列表更改时只更新这些现有节点（textContent、属性等）。复用已经创建的节点比重新渲染整个列表重建所有节点的开销小得多，因此对于非常大的列表来说这种方法效率更高。

但如果你的列表平均只有 25 个项目时，你可能会想知道重新渲染整个列表能比虚拟 DOM 的方法慢多少。当你渲染 250 个项目时可能会变得很慢，但理智的开发人员在这种情况下就应该分页了。

我不是说大家就应该抛弃虚拟 DOM，因为它的确是很棒的技术。如果遇到真正需要虚拟 DOM 的情况，自然一定要使用它。我只是希望大家遇到比较轻量的问题时先思考一下能不能找到一个比较轻量的解决方案，而不是上来就动用重量级的杀手锏。

customElement 演示的 Github 仓库包含一个 Web 组件，它在 li 标签内渲染任何设置为其 items 属性的字符串数组。只要将 items 设置为新数组它就会重新渲染整个列表，但是复用现有的 li 标记也很简单。

结论

答案很清楚了，只需几行代码即可对 Web 组件进行声明式数据绑定。我觉得自己已经清楚地证明了数据绑定很容易实现，并且你不需要动用整个框架也能使用它。

上面提到的 Github 仓库中的代码不是 React 或 Vue.js 等框架的替代品，本来也没这个意思。框架提供的并不只有数据绑定，本文和涉及的代码是为了证明你不一定需要一个框架来实现声明式数据绑定。

除了数据绑定之外，customElement 还提供了一些方便的方法来选择元素以及显示和隐藏元素。

以上分享的dropdownlist绑定数据库怎么用 和 详解dropdownlist控件用法的详细讲解，仅供大家参考建议！