ResizeObserver를 기반으로 너비와 높이를 자동으로 계산하는 반응 구성 요소 구현

🏠 홈페이지

📦 설치

  yarn add @oyyds/react-auto-sizer  # or npm i @oyyds/react-auto-sizer -S

🔨 사용

import AutoSizer from '@oyyds/react-auto-sizer';

const AutoSizeComponent = () => {
  return (
    <div>
      <AutoSizer>
        {({ width, height }) => (
          <div
            style={{
              width,
              height,
            }}
          >
            content
          </div>
        )}
      </AutoSizer>
    </div>
  );
};

🧩 비즈니스 현장

이제 대부분의 비즈니스 시나리오는 빅 데이터 테이블, 빅 데이터 트리, 빅 데이터 드롭다운 상자 등과 같은 빅 데이터와 호환되어야 하며 모든 빅 데이터 구성 요소는 너비와 높이를 지정해야 합니다. 대부분의 실제 비즈니스 인터페이스는 실시간으로 너비와 높이를 계산해야 하며, react-auto-sizer는 너비와 높이의 자동 계산 작업을 완료합니다.

🧑‍💻 코딩

사전 조사 초기에는 창 크기를 조정해야 했지만 크기 조정으로 인해 창이 변경될 때 성능 문제가 발생하고 일부 극단적인 픽셀이 지터로 나타납니다. ;

ResizeObserver, 인터페이스는 요소의 콘텐츠 영역 또는 SVGElement의 경계 상자에서 변경 사항을 수신할 수 있습니다. 콘텐츠 영역은 패딩에서 빼야 합니다. -- MDN에서

ResizeObserver 최선의 선택, 반응 후크 useEffect 사용, 핵심 코드는 다음과 같습니다.

const updateState = useCallback(
    (newWidth: number, newHeight: number, entry: ResizeObserverEntry) => {
      // update state
      // onResize width, height
      props.onResize({ width: newWidth, height: newHeight }, entry);
    },
    [childParams, disableHeight, disableWidth, onResize],
  );

const observer = useMemo(
    () =>
      new ResizeObserver((entries: ResizeObserverEntry[]) => {
        for (const entry of entries) {
          const contentRect = entry.contentRect;
          const width = Math.trunc(contentRect?.width || 0);
          const height = Math.trunc(contentRect?.height || 0);
          updateState(width, height, entry);
        }
      }),
    [updateState],
  );

useEffect(() => {
    if (!_autoSizerRef?.current?.parentNode) {
      throw new Error('Not Found AutoSizer parentNode');
    }
    observer.observe(_autoSizerRef?.current?.parentNode as Element);
    return () => {
      observer.disconnect();
    };
  }, [observer]);

집중하다:

observer.observe(_autoSizerRef?.current?.parentNode as Element), 부모 DOM 노드 듣기

contentRect: ResizeObserverEntry DOMRectReadOnly 읽기 전용 속성 반환 contentRect , 관찰된 요소의 새 크기를 포함하는 개체 속성:

{
  "x": 0,
  "y": 0,
  "width": 300,
  "height": 200,
  "top": 0,
  "right": 300,
  "bottom": 200,
  "left": 0
}

contentRect는 콘텐츠 영역의 크기인 콘텐츠 상자를 반환합니다(자세한 이유는 Zhang Xinxu의 ResizeObserver 소개 참조).



그래서 contentRect.width, contentRect.height는 필요한 너비와 높이입니다.

⭐️ 읽어주셔서 감사합니다

github: https://github.com/niexq/react-auto-sizer , 읽어주셔서 감사하고 별님을 환영합니다

🐳 영감의 원천

react-virtualized-auto-sizer
ResizeObserver
Detect DOM size changes JS API ResizeObserver