`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 중국어 웹사이트의 기타 관련 기사를 참조하세요!