> 웹 프론트엔드 > JS 튜토리얼 > `useInsertionEffect` React Hook 사용 사례

`useInsertionEffect` React Hook 사용 사례

WBOY
풀어 주다: 2024-08-22 19:14:06
원래의
584명이 탐색했습니다.

Use cases for `useInsertionEffect` React hook

소개

useEffect 후크에 익숙한 사람이라면 누구나 useLayoutEffect가 더 적합할 때가 있습니다.

useInsertionEffect를 사용한 사람은 많지 않습니다. 한번 살펴보겠습니다.

후크용 API는 useEffect와 매우 유사하며 설정 함수, 종속성 배열에 코드를 추가해야 하며 정리 함수를 반환할 수 있습니다.

React 문서에 이 설명이 나와 있습니다.

useInsertionEffect는 CSS-in-JS 라이브러리 작성자를 위한 것입니다.

주로 구성 요소 마운트 시 일부 코드를 한 번 실행하는 등 다른 목적으로 유용할 수 있습니다. 창에 이벤트 리스너를 추가합니다.

사용 사례

시키 코드 하이라이터

  React.useInsertionEffect(() => {
    initShiki().then((highlight) => {
      setHtml(highlight(content));
    });
  }, [content]);
로그인 후 복사

창용 이벤트 리스너

  useInsertionEffect(() => {
    const popCb = () => {
      const newVal = parse(filterUnknownParamsClient(defaultState));
      state.current = newVal
    };

    window.addEventListener(popstateEv, popCb);

    return () => {
      window.removeEventListener(popstateEv, popCb);
    };
  }, []);
로그인 후 복사

일부 맞춤 구독

  useInsertionEffect(() => {
    const cb = () => {
      _setState(stateMap.get(stateShape.current) || stateShape.current);
    };
    const unsub = subscribers.add(stateShape.current, cb);

    return () => {
      unsub();
    };
  }, []);
로그인 후 복사

장점과 단점

  • 이 후크의 주요 이점은 구성 요소가 렌더링되기 전과 다른 후크 전에 코드를 실행한다는 것입니다.
  • 이 후크 내부에서 useState.setState를 사용하면 안 되지만 작동하는 것이므로 나중에 변경될 수도 있습니다.
  • 타임훅런으로 심판이 첨부되지 않습니다.

위 내용은 `useInsertionEffect` React Hook 사용 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿