登录
首页 >  文章 >  前端

具有观察型的国家管理

时间:2025-02-17 13:28:09 244浏览 收藏

从现在开始,努力学习吧!本文《具有观察型的国家管理》主要讲解了等等相关知识点,我会在golang学习网中持续更新相关的系列文章,欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧,希望能帮到你!

将列表渲染到DOM并管理其状态与管理简单变量的状态大相径庭。

一些库使用特殊的标识符,称为“键”,来启用其增量渲染引擎,从而确定发生了哪些更改以及需要移动哪些内容:```javascript {friends.map(friend =>

  • {friend.name}
  • )}
    
    另一种无需任何猜测的方法是使用可观察集合:一种在更改时发出事件的数组,其中包含有关已更改元素的详细信息,以便渲染引擎可以捕获这些信息并确定渲染页面上更改的最佳方法。在与Rimmel.js一起使用时,这就是可观察集合的用途:
    
    ```javascript
    class Item {
      // 定义项目结构
    }
    
    const initial = [ /* 初始数据 */ ];
    const data = new ObservableCollection(initial, Item);
    
    const addNew = async () => {
      const newItem = await newItemForm.show();
      data.push(newItem);
    };
    
    document.body.innerHTML = rml`
      
      ${data}
    `;

    可观察集合巧妙地代理了所有数组方法,Rimmel中的CollectionSink知道,一个新项目需要附加到列表的末尾。如果调用.unshift(),它知道需要在开头插入一个新项目,以此类推。

    想要替换集合的全部内容?.assign()方法只做这件事,并导致渲染引擎简单地替换DOM中的整个列表。同样,对集合的所有其他变异操作都会将信息传递给Sink,以便它准确地知道要执行哪种DOM变异来反映更改。没有猜测,没有过度设计的DOM差异,总体上非常轻量级、快速。

    如果您想亲身体验使用ObservableTypes的便捷性,请尝试一下:

    具有观察型的国家管理

    文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《具有观察型的国家管理》文章吧,也可关注golang学习网公众号了解相关技术文章。

    相关阅读
    更多>
    最新阅读
    更多>
    课程推荐
    更多>