大家好！在本文中，我们将讨论一个相当不寻常的主题，由于某种原因我没有找到有关该主题的信息，尽管它在现代 javascript 框架和用于创建用户界面的库中非常有用，因为在某些情况下，应用该概念可以帮助将 dom 的处理速度提高数倍。
名称是有条件的，但本质很重要。
平时状态的问题
术语“通常状态”是指由于状态管理器或框架或库的内部功能而直接保存的数据。 vue.js 中状态的示例：
createapp({ setup() { return { count:ref(0); }; }, template: ` clicks: {{ count }} `,}).mount("#app");
在这种情况下，状态直接存储在对象中，该对象在框架的预定义方法中返回。
因此，dom 节点可以通过不同的语法结构依赖于给定的状态。在示例中，这样的构造是字符串 {{ clicks }} ，它由于字符串插值而更改为当前数据。
此外，常用的语法结构是“循环”。循环是一个关键字，可以是属性，也可以是显式定义 dom 节点创建的方法，具体取决于来自状态的元素数量和值本身。循环示例：
{{ id }} {{ label }}
假设我们想要更新一个元素的类。我们的数据以对象数组的形式出现。很明显，键必须在对象中显式指定：您可以通过键获取双大括号中的类的值，但这是主要问题，因为它很慢。
立即学习“Java免费学习笔记（深入）”；
为了证实我的话，我将采用cample.js框架的基准测试（在开发过程中我刚刚注意到了类似的问题）。在那里可以清楚地看到，直接依赖于正常状态数据的类比使用临时 view 状态的类设置得慢。
让我们使用cample.js的两个版本：3.2.0-alpha.45和3.2.1-beta.0。其中有一行“select row”（4行），这正是主要区别：
数据取自 126 和 128 基准测试版本。
从图中可以看出，一个结果与另一个结果相差几乎一倍半。我想了很久，为什么会这样呢？我曾经认为代码只是速度慢，但事实不同。 如果数据处于常规状态，那么即使我们只更改 n 序数对象中属性值中的一个字母，也有必要遍历所有数据。
const olddata = [ { id: 1, label: "text 1", }, { id: 2, label: "text 2" }, { id: 3, label: "text 3", }];const newdata = [ { id: 1, label: "text 11", // 1 iteration, one letter has changed, but we're still looking further }, { id: 2, label: "text 2" }, // 2 iteration { id: 3, label: "text 3", // 3 iteration }];
因此，它总是很慢，但这是逻辑上正确的方法，也是所有用于创建用户界面的现代框架和库的主要笑话。但除了这种方法还有什么其他选择呢？
临时视图状态
特别是对于这样的问题，当需要引入与主状态分离的状态，以免多次遍历元素时，您可以在代码中使用某种概念，该概念将允许您不绑定对于一个对象，但是对于一个元素。这个概念是一个临时的 view 状态。
其本质如下：我们为每个元素创建一个单独的数组。它将位于模块本身的代码中，我们在回调函数中提供与该数组交互的用户方法。因此，该模块将存储大约以下代码：
{ el:li, temporaryviewstate:[{class:"value"}]}
在项目中是这样的：
setclass: [ (setdata, event, eachtemporaryviewstate) => () => { const { settemporaryviewstate, cleartemporaryviewstate } = eachtemporaryviewstate; cleartemporaryviewstate(); settemporaryviewstate(() => { return { class: "value" }; }); }, "updateclass",],
此外，这个数组只能在调用回调函数时创建，或者简单地为所有元素创建一个数组。这将允许我们不绑定到来自正常状态的数据，而是绑定到我们想要更新的特定元素。也就是说，我们创建一个可以清除和重写的临时状态。这非常适合我们想要处理不受控制的元素的情况：
也就是说，它根本不直接依赖于平常的状态，所以在dom中，这个节点可以说是静态的（如果我们制作一个节点模板，那么这个元素就会跳过）。
因此，我们有一个仅依赖于特定元素和回调函数的状态。使用“循环”时，您不必遍历整个数据数组来更新一个元素中的一个字母。只需为特定元素调用特定函数并更新特定类就足够了。
这将使您能够在使用数据和 dom 时快速获得结果。很有可能在现代框架和库中应用这个概念并使用它。
以上就是JavaScript 中临时视图状态的概念的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491677.html
微信扫一扫 
支付宝扫一扫 
