정말 부분 업데이트 [React Hook]는 어떤 모습인가요?

뭐야?

useMemo와 같은 반응 렌더링 성능을 향상시키는 유용한 팁이 있다는 것을 여러분이 알고 있다고 생각합니다.

Dan의 블로그를 이미 읽었다면 "Move State Down"및 "Lift Content Up"과 같은 다른 팁도 알고 있어야 합니다.
Dan's blog

그러나 복잡한 구성 요소가 있고 이 구성 요소에 목록 항목(아마도 10개)이 있고 항목 중 하나(아마도 3번)를 업데이트하려면 다음과 같은 partialRender 함수만 호출하면 됩니다.

partialRender({3: `my new content`});

그러면 그게 전부입니다. 다른 최적화를 신경 쓸 필요가 없으며 전체를 다시 렌더링하지 않습니다.

이것이 바로 usePartialRender가 하는 일이며 때로는 약간 까다롭습니다. 누군가 함수 구성 요소에 대해 부분 렌더링이 가능하다고 생각할 것입니다. 예, 정말 부분 업데이트입니다.

usePartialRender 목적은 무엇입니까?

재구성하지 않고 복잡한 구성 요소 부분 콘텐츠를 업데이트하도록 도와줍니다.

모든 콘텐츠를 새로 고치는 쉬운 방법을 제공합니다.

빠른 검토

온라인 데모: codesandbox

  const [ListContent, partialRender, setRenderKeys] =
 usePartialRender(
    initRenderKeys,
    initList
  );

usePartialRender는 두 개의 선택적 초기 변수를 입력하거나 아무것도 입력하지 않을 수 있습니다.

초기 변수는 한 번만 실행되며 지연 할당도 가능합니다.


입력 키
필수의
설명
게으른 할당
실행 시간


initRenderKeys
아니
초기 렌더링 키, partialRender({updateKey: updateContent})에 사용
()=>initRenderKeys
하나

초기화 목록
아니
렌더링 키에 키가 없으면 렌더링하려는 초기 목록이 표시되지 않습니다.
()=>초기화 목록
하나



출력 키
설명
전체 렌더링을 만들 것인가?


목록 콘텐츠
렌더링에 직접 사용할 수 있는 최종 콘텐츠(예: )
아니

부분 렌더링
부분 렌더링 기능, 업데이트 콘텐츠만 할당할 수 있습니다.
아니

setRenderKeys
이것은 렌더 키를 제어하는 ​​데 도움이 될 수 있으며 모든 키 목록을 할당해야 합니다. 이것은 전체 렌더링을 트리거하지만 목록 렌더링에는 영향을 미치지 않습니다.
예

결론

사용을 위한 마법은 없습니다. PartialRender, 저는 사물을 자동으로 만들고 사용을 더 편리하게 하려고 합니다. usePartialRender는 동적 숫자 자식을 위한 특별한 수트입니다. 팝업 구성 요소에서 사용하고 모든 부동 DOM을 수집하도록 합니다.

usePartialRender 소스 코드
https://github.com/react-atomic/reshow/blob/main/packages/reshow-return/src/usePartialRender.js

반응 팝업 구성 요소
https://github.com/react-atomic/react-atomic-organism/tree/main/packages/organism-react-popup

NPM 패키지
https://github.com/react-atomic/reshow/blob/main/packages/reshow-return