根据外部互联网连接动态改变状态–React(offlineonline)。

我有一个React组件,它包括互联网连接的可用性标志。UI元素必须根据状态实时动态变化。而且,随着状态的变化,功能的表现也不同。旗帜.

我目前的实现是使用Axios在每一秒钟使用间隔时间对远程API进行轮询,并相应地更新状态。我正在寻找一种更细化、更高效的方法来完成这个任务,以最小的计算成本来消除状态的1秒误差。考虑过在线 如果且仅如果 设备具有外部互联网连接

目前的执行情况。

class Container extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isOnline: false
    };
    this.webAPI = new WebAPI(); //Axios wrapper
  }

  componentDidMount() {
    setInterval(() => {
      this.webAPI.poll(success => this.setState({ isOnline: success });
    }, 1000);
  }

  render() {
    return <ChildComponent isOnline={this.state.isOnline} />;
  }
}

已编辑。

寻找一种能够检测外部互联网连接的解决方案。该设备可以连接到一个没有外部连接的局域网。所以,它被认为是离线的。考虑在线 如果且仅如果 设备可以访问外部互联网资源。

解决方案:

方法一。使用传统的浏览器API Navigator.onLine

返回浏览器的在线状态。该属性返回一个布尔值,true表示在线,false表示离线。每当浏览器连接到网络的能力发生变化时,该属性就会发送更新。当用户跟随链接或脚本请求远程页面时,就会发生更新。例如,当用户在失去网络连接后不久点击链接时,该属性应该返回false。

你可以把它添加到你的组件生命周期中。

使用Chrome开发工具玩下面的代码–在网络选项卡下将 “在线 “切换为 “离线”。

class App extends React.PureComponent {
  state = { online: window.navigator.onLine }
  
  componentDidMount() {
    window.addEventListener('offline', this.handleNetworkChange);
    window.addEventListener('online', this.handleNetworkChange);
  }
  
  componentWillUnmount() {
    window.removeEventListener('offline', this.handleNetworkChange);
    window.removeEventListener('online', this.handleNetworkChange);
  }
  
  handleNetworkChange = () => {
    this.setState({ online: window.navigator.onLine });
  }
  
  render() {
    return (
      <div>
       { this.state.online ? 'you\'re online' : 'you\'re offline' }
      </div>
    );
  }
}

ReactDOM.render(
  <App />
, document.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何将名称文件作为一个变量引用,以便以后在程序中打开。

2022-9-8 14:40:43

未分类

如何在3秒内显示一个容器

2022-9-8 14:51:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索