기본 로딩 상태 구현

html, javascript 및 Reactjs 후크를 사용하여 기본 로딩 상태를 어떻게 생성합니까?

요구사항:
1) React 기능적 구성요소.
2) 로딩 텍스트인 "Loading"을 반환해야 합니다.
3) 로딩 텍스트의 끝에 1초마다 점증적으로(1) 추가되는 점을 표시합니다.
예:
로드 중입니다. -1초- 로드 중.. -1초- 로드 중... -1초- 로드 중

접근하다:

정적인 요소를 결정하세요. 그런 다음 역학(상태, 후크 등)을 추가합니다. React 문서의 생각대로

정적 요소 구현:

1) "Loading"을 반환하는 기능적 컴포넌트를 생성합니다.

const Loading = () => {
  const loadingText = "Loading";

  return (
    <div>
      <h2>{loadingText}</h2>
    </div>
  );
};

export default Loading;

역학:

1) 점의 개수는 컴포넌트의 상태를 나타냅니다. 따라서 useState를 사용하여 상태 변수를 정의하세요.

const [dots, setDots] = useState(1);

텍스트를 로드한 후 점을 추가하세요

{".".repeat(dots)}

2) 매초마다 상태가 자동으로 변경됩니다. window.setInterval이 이 작업을 수행할 수 있습니다. 지금은 콜백 함수를 비워 두세요.

window.setInterval(() => {
      // Logic to increment dots
    }, 1000);

3) 초기 렌더링 후 한 번만 실행되는 useEffect 후크를 만듭니다.

useEffect(() => {
    window.setInterval(() => {
      // Logic to increment dots
    }, 1000);
  }, []);

지금까지 앱에는 '로드 중'만 표시됩니다.
잠시 멈추고 window.setInterval 콜백 함수 내부의 논리를 생각해 보세요.

분명해 보이는 솔루션:

setDots((dots + 1) % 4);

그러나 틀렸습니다. 구성요소는
에서만 이동됩니다. "로드 중."-1s-"로드 중..". 그러면 막힐 것입니다.

이유: useEffect의 콜백 fn은 점의 초기 상태(1)에서 트리거됩니다. dots 변수의 업데이트는 useEffect의 콜백 fn 종료에 영향을 주지 않습니다.

Catch-1: useEffect의 종속성 배열에 점을 포함하는 것은 의미가 없습니다. 왜냐하면 도트 상태가 업데이트될 때마다 window.setInterval을 호출하기 때문입니다. (대신 window.setTimeout을 사용할 수 있습니다. 그런데 왜 그럴까요?)

Catch-2: Loading 구성 요소의 도트 상태는 useEffect 및 window.setInterval에 종속되어야 합니다. 그러나 useEffect에서 직접 점을 사용하면 useEffect가 점에 의존하게 됩니다.

다음 단계로 넘어가기 전에 클로저에 대해 생각해 보세요.

수정된 접근법

useEffect의 콜백 자체 도트 상태(예: effectDots)를 정의합니다. window.setInterval의 콜백 함수는 effectDot를 증가시키고 로드 구성 요소의 도트 상태도 설정합니다.
(핵심은 종속성을 setInterval -> 구성 요소의 도트 상태에서 구성 요소의 도트 상태 -> setInterval로 변경하는 것입니다. )

지역 상태 effectDots를 사용하여 useEffect 및 window.setInterval의 콜백 함수 버전이 수정되었습니다.

  useEffect(() => {
    let effectDots = 1;
    window.setInterval(() => {
      // increment, modulo 4
      // set the Loading component's state
      setDots(effectDots++ % 4);
    }, 1000);
  }, []);

위 내용은 기본 로딩 상태 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!