React JS：能夠檢測瀏覽器中的切換選項卡

Question

如果我復制了這個問題，我很抱歉，但我沒有找到解決問題的方法。

React檢測瀏覽器中的切換選項卡或隱藏瀏覽器窗口的最佳方法是什么？

我知道有一個頁面可見性API ，但我如何在React組件中實現它？

這是最簡單的方法，但我不知道是否正確

import React, { Component } from 'react';

class Sample extends Component {
  handleBlur = () => {
    console.log('Blur');
  }

  handleFocus = () => {
    console.log('Focus');
  }

  render() {
    return (
      <div
        style={{ width: 400, height: 200 }}
        onBlur={this.handleBlur}
        onFocus={this.handleFocus}
      >
      test
      </div>
    );
  }
}

export default Sample;

Answer 1

let hidden = null;
let visibilityChange = null;
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support 
  hidden = 'hidden';
  visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
  hidden = 'msHidden';
  visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
  hidden = 'webkitHidden';
  visibilityChange = 'webkitvisibilitychange';
}

class Hello extends React.Component {

  state = {
    actions: []
  }

  componentDidMount() {
    document.addEventListener(visibilityChange, this.handleVisibilityChange, false);
  }

  handleVisibilityChange = () => {
    if (document[hidden]) {
     this.setState({actions: [...this.state.actions, 'hide']});
    } else {
     this.setState({actions: [...this.state.actions, 'show']});
    }
  }

  componentWillUnmount()    {
    document.removeEventListener(visibilityChange, this.handleVisibilityChange);
  }

  render() {
    return (
      <ul>
      {
        this.state.actions.map((item, key) => <li key={key}>{item}</li>)
      }
    </ul>
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);