简体   繁体   English

防暴js this.update奇怪的行为

[英]riot js this.update strange behavior

I have a simple code 我有一个简单的代码

<test>
<ul>
  <li each={ books }> { title }</li>
</ul>

<button type="button" name="button" onclick={ loadBooks }>Load books</button>

<script>
  'use strict';

  this.books = [];
  let offset = 0;

  this.on('mount', () => {
    console.log('mounted');
  });

  this.on('update', () => {
    console.log('updated');
  });

  loadBooks ()  {
    fetch('/api/books?limit=10&offset='+offset)
    .then(response => response.json())
    .then(books => {
      offset+=10;
      this.books = books;
      // this.update();
    })
    .catch(err => console.log(err));
  }
</script>

in my app.js i just requrie riot, test.tag and do riot.mount('#root', 'test'); 在我的app.js中,我只是要求防暴,test.tag并执行riot.mount('#root', 'test'); this is init screen, why update fired before mount ? 这是init屏幕,为什么要在安装前触发更新? 在此处输入图片说明 when i click first time, it log that update fired but view do not re-rendered 当我第一次单击时,它会记录触发更新的日志,但视图不会重新呈现 在此处输入图片说明 and after second click, event update fired and view re-rendered 第二次点击后,事件更新被触发并重新呈现视图 在此处输入图片说明 在此处输入图片说明

if i uncomment this.update(); 如果我取消注释this.update(); inside promise, event update will fired twice 内部承诺中,事件更新将触发两次

upd: if remove this.books = books and write this.update({books}); 更新:如果删除this.books = books并编写this.update({books}); event update will fire twice, and render will work, but why 2 times??? 事件更新将触发两次,并且渲染将起作用,但是为什么要2次?

1) update before mount : this is fixed in @next / 3.0.0, as per: https://github.com/riot/riot/issues/1661 1) mountupdate :这在@next / 3.0.0中已修复,如下所示: https : //github.com/riot/riot/issues/1661

2) Why 2x update : possibly, one from the tag and one regarding the child tag. 2)为什么要进行2x update :可能,一种来自标签,另一种与子标签有关。 This was asked here: https://muut.com/i/riot-js/using:why-update-event-is-trigg 这是在这里被问到的: https : //muut.com/i/riot-js/using : why-update-event-is-trigg

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM