小编Kev*_*Kev的帖子

在用户离开选项卡或关闭屏幕后，如何检测浏览器何时限制计时器和 websockets 断开连接？（javascript）

语境

作为渐进式 Web 应用程序提供的游戏，它具有计时器 ( setTimeout, setInterval) 和 websocket 连接以获得实时通信。

怎么了

只要用户留在应用程序中，一切都很好。但是当用户转到另一个选项卡、另一个应用程序或关闭屏幕（在移动设备的情况下）时，它就变成了一个“地狱般的未知世界”。

Websockets 可能会也可能不会“暂停”或“关闭”
计时器看起来像是受到了限制或去抖动。

这种行为似乎取决于浏览器和平台，甚至可能取决于特定的用户行为。我猜浏览器和操作系统有自己的生命周期/机制来节省电池和/或计算。

当用户回来时，应用程序处于未知状态，我正在努力正确恢复状态。

关于 websockets 我有与socket.io和reconnecting-websocket 的自动重新连接，但这还不足以解决所有问题。

寻找答案

不同浏览器的“生命周期”是什么？这是记录在案吗？他们什么时候决定关闭和油门？
他们对 websockets 做了什么？浏览器只是断开它们？
他们究竟对计时器做了什么？他们扼杀他们或消除他们或其他什么？
javascript 执行一般会发生什么？暂停/销毁/节流？
当它要关闭时，有没有办法挂钩某种浏览器生命周期事件？我唯一能找到的可能是可见性 API
有没有办法人为地重现这种行为以测试解决方案？在桌面上尤其困难。Websockets 无法关闭，并且 Chrome 开发人员似乎并不急于解决 2014 年的问题（！）：使用连接限制时不包括 websockets
不管上述情况，是否有实用的跨浏览器解决方案来检测/解决此问题？（例如，根据经验，与 Chrome 相比，桌面版 Firefox 的行为似乎完全不同，iPhone 断开连接的频率远高于 Android）

相关链接

Safari 在页面未聚焦时由于不活动而丢弃 Web 套接字连接

javascript cross-browser websocket progressive-web-apps

Kev*_*Kev

2020 03-29

21
推荐指数

1
解决办法

2270
查看次数

无法在尚未装入的组件上调用setState

这是我第一次面对这个警告信息.

无法在尚未装入的组件上调用setState.

具体情况如下:

这是一个无操作,但它可能表示您的应用程序中存在错误.相反,this.state直接指定或state = {};在MyComponent组件中定义具有所需状态的类属性.

" 尚未安装 "部分实际上几乎没有意义,因为触发问题的唯一方法是通过单击需要安装的组件中的按钮来调用函数以查看按钮.该组件在任何给定时间都没有卸载.

这个虚拟组件在我的应用程序中重现错误:

import PropTypes from 'prop-types'
import React from 'react'

export default class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      initial: 'state'
    }
    this.clickMe = this.clickMe.bind(this)
  }

  clickMe () {
    this.setState({
      some: 'new state'
    })
  }

  render () {
    return (
      <div>
        <button onClick={this.clickMe}>click</button>
      </div>
    )
  }
}

ItemFactory组件,itemFactory.js(简化):

ItemFolder组件,itemFolder.js(简化):

标签 统计

小编Kev_Kev的帖子

标签统计