React Hooks useEffects의 기능이 호출되기 전에 렌더가 발생하는가?

React Hooks useEffects의 기능이 호출되기 전에 렌더가 발생하는가?

useEffect의 첫 번째 함수가 첫 번째 렌더보다 먼저 호출된다고 생각했을 텐데, 아래 메서드를 호출하면 반환 메서드 호출 직전에 내 console.log가 호출되면 useEffect의 첫 번째 매개 변수 함수가 호출된다.

통화 순서:

just before render return
ImageToggleOnScroll.js:8 useEffect before setInView
ImageToggleOnScroll.js:10 useEffect after setInView

출처:

import React, {useState,useRef,useEffect} from "react";

// primaryImg is black and white, secondaryImg is color
const ImageToggleOnMouseOver = ({ primaryImg, secondaryImg }) => {
    const imageRef = useRef(null);

    useEffect(() => {
        console.log('useEffect before setInView')
        setInView(isInView());
        console.log('useEffect after setInView')
        window.addEventListener("scroll", scrollHandler);

        return () => {
            window.removeEventListener("scroll", scrollHandler);
        };
    }, []);

    const isInView = () => {
        if (imageRef.current) {
            const rect = imageRef.current.getBoundingClientRect();
            return rect.top >= 0 && rect.bottom <= window.innerHeight;
        }
        return false;
    };

    const [inView, setInView] = useState(false);
    const scrollHandler = () => {
        setInView(() => {
            return isInView();
        });
    };

    console.log('just before render return')
    return (
        <img
            ref={imageRef}
            src={inView ? secondaryImg : primaryImg}
            alt="image here"
        />
    );
};

export default ImageToggleOnMouseOver;

다음을 사용하여 생성된 효과useEffect렌더 커밋 단계 이후에 실행되며, 따라서 렌더 주기 후에 실행된다.이는 렌더 커밋 단계 중에 비일관성을 유발할 수 있는 부작용이 발생하지 않도록 하기 위함입니다.

설명서에 따르면

기능 구성요소의 본체 내부에서는 돌연변이, 구독, 타이머, 로깅 및 기타 부작용이 허용되지 않는다(반응의 렌더 단계라고도 함).이렇게 하면 UI에서 버그가 혼동되고 불일치가 발생할 수 있다.

함수가 에 전달됨useEffect렌더가 화면에 커밋된 후 실행됨.

useEffect후크를 사용하여 동작의 복제 가능componentDidMount,componentDidUpdate그리고componentWillUnmount다음 효과를 실행하기 전 또는 마운트 해제하기 전에 실행되는 콜백 내에서 실행된 두 번째 인수인 종속성 배열과 반환 함수인 종속성 배열로 전달된 인수에 따른 클래스 구성 요소의 수명주기 방법

특정 용도의 경우예:animations이용해도 좋다useLayoutEffect모든 DOM 돌연변이가 발생한 후 동기적으로 실행된다.DOM에서 레이아웃을 읽고 동기식으로 다시 렌더링하려면 이 옵션을 사용하십시오.useLayoutEffect 내부에서 예약된 업데이트는 브라우저에 페인트를 칠하기 전에 동기적으로 플러시된다.

에 따르면useEffect 문서화:

React class 라이프사이클 방법을 잘 알고 있는 경우 Effect Hook을 componentDidMount, componentDidUpdate 및 componentWillUnmount를 결합한 구성 요소로 생각해 보십시오.

그렇다, 그것은 첫 번째 렌더와 각각의 후속 렌더 다음에 실행된다.

참조URL: https://stackoverflow.com/questions/55424405/does-a-render-happen-before-function-in-react-hooks-useeffect-is-called