대응 | 페이지 갱신 검출 방법 (F5)

대응 | 페이지 갱신 검출 방법 (F5)

React js를 쓰고 있어요.검출할 필요가 있다page refresh사용자가 새로 고침 아이콘을 누르거나 F5를 누르면 이벤트를 확인해야 합니다.

javascript 기능을 사용하여 stackoverflow 포스트를 시도했습니다.

javascript 기능을 사용했습니다.beforeunload여전히 운이 없군

onUnload(event) { 
  alert('page Refreshed')
}

componentDidMount() {
  window.addEventListener("beforeunload", this.onUnload)
}

componentWillUnmount() {
   window.removeEventListener("beforeunload", this.onUnload)
}

여기 스택블리츠에 대한 전체 코드가 있습니다.

리액트 후크, UseEffect를 사용하는 경우 컴포넌트에 다음과 같은 변경을 추가할 수 있습니다.그것은 나에게 효과가 있었다.

useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, []);
  const alertUser = (e) => {
    e.preventDefault();
    e.returnValue = "";
  };

컨스트럭터에 배치합니다.

if (window.performance) {
  if (performance.navigation.type == 1) {
    alert( "This page is reloaded" );
  } else {
    alert( "This page is not reloaded");
  }
}

동작합니다.스택블리츠의 예를 참조해 주세요.

이것은 매우 간단합니다.페이지를 새로고침 할 때마다 기본 경보가 추가됩니다.

이 답변에는 다음과 같은 내용이 있습니다.

1. 디폴트 사용방법
2. 검증이 포함된 경고

1. 디폴트 사용방법

기능 컴포넌트

useEffect(() => {
    window.onbeforeunload = function() {
        return true;
    };

    return () => {
        window.onbeforeunload = null;
    };
}, []);

클래스 컴포넌트

componentDidMount(){
    window.onbeforeunload = function() {
        return true;
    };
}

componentDidUnmount(){
    window.onbeforeunload = null;
}

---

2. 검증에 의한 경고

검증은 조건이 충족될 때마다 경고만 추가하도록 설정할 수 있습니다.true.

기능 컴포넌트

useEffect(() => {
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }

    return () => {
        window.onbeforeunload = null;
    };
}, [condition]);

클래스 컴포넌트

componentDidMount(){
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }
}

componentDidUnmount(){
    window.onbeforeunload = null;
}

코드가 정상적으로 작동하는 것 같습니다. 새로 고침을 중지하지 않기 때문에 경고가 작동하지 않습니다.네가 만약console.log('hello')출력이 표시됩니다.

업데이트 ---

이렇게 하면 사용자의 새로고침이 중지되지만 원하는 작업에 따라 달라집니다.

componentDidMount() {
    window.onbeforeunload = function() {
        this.onUnload();
        return "";
    }.bind(this);
}

유감스럽게도 현재 승인된 답변은 performance.navigation 이후 더 이상 받아들일 수 없는 답변입니다.유형은 사용되지 않습니다.

최신 API는 실험용 ATM입니다.회피책으로서 redux 스토어(또는 사용하는 것이 무엇이든)에 값을 저장하여 새로고침 후 상태를 나타내고 첫 번째 루트 변경 시 루트가 새로고침이 아닌 변경되었음을 나타내는 값밖에 제안할 수 없습니다.

REDUX 또는 CONTEX API 중 하나를 사용하는 경우 매우 간단합니다.REDUX 또는 CONTEX 상태 변수를 확인할 수 있습니다.사용자가 페이지를 새로 고치면 CONTEX 또는 REDUX 상태가 리셋되므로 수동으로 다시 설정해야 합니다.따라서 이 값이 지정한 초기값과 같거나 설정되어 있지 않으면 페이지가 새로 고쳐진 것으로 간주할 수 있습니다.

언급URL : https://stackoverflow.com/questions/50026028/react-how-to-detect-page-refresh-f5