요약

본고에서 우리는 두 개의react 갈고리useMemo와 useCallback를 연구할 것이다. 이것은react 렌더링 구성 요소의 시간을 이해하게 할 것이다.
우리는 클래스 기반의 구성 요소가 아니라 함수 기반의 구성 요소만 연구할 것이다.(나는 이런 클래스 기반 구성 요소에 익숙하지 않다).

사진 작성자HalGatewood.com가 Unsplash

필요한 수준

이 글은 React의 기초 지식을 막 배웠고 갈고리에 대해 더 알고 싶은 개발자들을 위해 준비한 것이다.

useMemo와useCallback에 대한 일반 개념

이 두 갈고리는 코드 최적화를 먼저 처리하여 React 구성 요소의 렌더링 최적화에 매우 유용하다.이 두 갈고리가 왜 중요한지 이해하기 위해서, 우리는 먼저 React 렌더링 구성 요소를 보는 시간을 필요로 한다.

어셈블리 렌더링 정보

React는 어셈블리를 렌더링할 때와 렌더링하지 않을 때를 계산하는 데 매우 똑똑하다.
기본적으로 메모리에 가상 DOM 트리를 유지하고 이 구성 요소를 다시 보여야 하는지 확인합니다.
예를 들어, React는 어셈블리의 변수state를 변경할 때마다 어셈블리를 렌더링합니다.(자세한 내용은 공식 홈페이지useState documentation를 참조하십시오.)
기본적으로 구성 요소를 렌더링하면 모든 하위 구성 요소가 다시 렌더링됩니다. 프롬프트 값이 바뀌지 않아도.
하위 요소의 렌더링 비용이 많이 드는 경우(예: 대컴퓨팅, 네트워크 가져오기 등)서브어셈블리의 재렌더링을 최적화하는 것이 재미있습니다.

어셈블리가 렌더링되었는지 확인하는 방법

Firefox/Chrome 개발 도구

두 번째 주제에서 벗어나 구성 요소가 렌더링되었는지 직관적으로 보기 React dev tools.어셈블리 탭과 설정 패널(기어)에서 어셈블리가 렌더링될 때 업데이트 강조 표시 상자를 선택할 수 있습니다.
그런 다음 어셈블리가 렌더링될 때마다 프레임이 녹색으로 깜박입니다.

카운터 추가

실험 항목에서, 우리는 구성 요소 주체 내부에 계수기를 추가할 수 있다.이 변수 값을 추적하려면 useState를 사용하지 마십시오.상태를 변경하면 다시 렌더링을 터치합니다. 카운터가 증가합니다. 다시 렌더링을 터치합니다. 무한순환의 세계에 오신 것을 환영합니다.
변수 카운터를 메모리에 보존하기 위해서, 우리는 useRef 갈고리를 사용해야 한다. 이것은 메모리에 가변 변수를 보존하지만, 변경할 때 다시 렌더링을 터치하지 않는다.
코드는 다음과 같습니다.

function CountComponent(props) {
  const countRef = useRef(0);
  useEffect(() => {
    countRef.current = countRef.current + 1;
  });
  return (<div className="counter">
            <p>Current count: {countRef.current} </p>
          </div>);
}

UseMoom 정보

기본 상황

그럼 우리 최초의 문제useMemo로 돌아가자.
original useMemo documentation는 useMemo를'기억'대상에 사용했다고 설명했다.useMemo:

데이터 값을 계산하는 내연 함수

의존항은 언제 이 값을 다시 계산해야 하는지를 결정하는 데 도움이 된다.(빈 그룹 [] 을 전달하면 이 값은 한 번만 계산됩니다.

다음 코드를 살펴보겠습니다.

function App() {
  const exampleData = {myString: "React is great"};
  const memoizedData = useMemo(() => exampleData,[]);
  ...

렌더링 App 구성 요소를 렌더링할 때마다 exampleData는 메모리에 다시 불러옵니다. 만약 그것이 큰 대상이라면 React는 시간이 걸릴 것입니다.
두 번째 줄useMemo에서 사용하면 이 데이터의 초기화를 막을 수 있기 때문에 약간의 시간을 절약할 수 있다.

memo() 함수와 결합하여 사용

useMemo와 Reactmemo() 기능을 결합하여 사용할 때 그것이 진정한 하이라이트다.

반응이 뭔데?memo() 함수

리액트가 구성 요소를 렌더링할 때, 프로젝터 값이 바뀌지 않아도 모든 하위 구성 요소가 다시 렌더링됩니다.React.memo() 함수는 여기서 우리가 이 문제를 해결하는 것을 돕는다.React.memo 도구가 변하지 않는 상황에서 구성 요소를 다시 렌더링하지 않을 것을 거의 보장합니다.
다음 코드를 확인하십시오.

function CountComponent(props) {
  const countRef = useRef(0);
  useEffect(() => {
    countRef.current = countRef.current + 1;
  });
  return (<div className="counter">
            <p>Current count: {countRef.current} </p>
          </div>);
}

const MemoCountComponent = React.memo( (props) =>  {
  const countRef = useRef(0);
  useEffect(() => {
    countRef.current = countRef.current + 1;
  });
  return (<div className="counter">
            <p>Current count: {countRef.current} </p>
          </div>);
});

우리는 두 개의 구성 요소CountComponent와 MemoCountComponent를 정의했고 후자는 React.memo() 함수로 봉인되었다.
만약 우리가 이 코드를 실행한다면, 우리는 CountComponent 모 구성 요소를 렌더링할 때마다 렌더링을 하고, MemoCountComponent 한 번만 렌더링하는 것을 알 수 있을 것이다.

useMemo 함수 사용

앞에서 보듯이 React.memo() 함수는 도구가 변하지 않는 상황에서 불필요한 렌더링을 방지할 수 있다.
그러나 리액트는 아이템에 변화가 생겼는지 확인하기 위해 천박한 비교를 사용했다.props가javascript 대상일 때, 렌더링할 때마다 새로운 인용을 만들고, React.memo() 매번 렌더링을 터치합니다.
다음 구성 요소를 살펴보면 다음과 같습니다.

const MemoPropsCountComponent = React.memo( (props) => {
  const otherCountRef = useRef(0);
  const testString = 'hello';
  useEffect(() => {
    otherCountRef.current++;
  });
  return (<div className="counter">
            <p>Current count: {otherCountRef.current} </p>
            <p> Function:  {props.stringFunction(testString)} </p>
            <p> Data: {JSON.stringify(props.data)} </p>
          </div>);
});

우리는 그것을 App 구성 요소에 포함시켰다.

function App() {
  const exampleData = {test: "React is great"};
  const memoizedData = useMemo(() => exampleData,[]);

  return (
    <div className="App">
      <main>
    <MemoPropsCountComponent data={exampleData} />
    <MemoPropsCountComponent data={memoizedData}/>
     </main>

React가 모 어셈블리를 렌더링할 때마다 첫 번째 어셈블리는 렌더링되지만 두 번째 어셈블리는 렌더링되지 않습니다.
이것은 서브어셈블리 렌더링을 최적화하는 좋은 예입니다.

후크

React는 객체가 아닌 함수를 기억하는 유사한 갈고리를 제공합니다.
official React documentation for useCallback 언급useCallback(myFunction, dependencyArray)은 useMemo(()=>myFunction, dependencyArray)와 같다.
그래서 위에서 언급한 useMemo에 관한 거의 모든 내용은 여전히 유효하다.
다음은 사용 예입니다.

function App() {
  const exampleData = {test: "Oui Monsieur"};
  const memoizedData = useMemo(() => exampleData,[]);

  const stringFunction = (s) => s.split("").reverse().join("");
  const memoizedCB = useCallback(stringFunction, []);

  return (
    <div className="App">
      <main>
        <MemoPropsCountComponent data={exampleData} stringFunction={stringFunction} />
       <MemoPropsCountComponent data={memoizedData} stringFunction={stringFunction} />
       <MemoPropsCountComponent data={memoizedData} stringFunction={memoizedCB} />
      </main>
    </div>
  );
}

코드를 실행할 때, 이전 두 구성 요소의 렌더링 시간은 부모 구성 요소의 렌더링 시간과 같지만, 세 번째 구성 요소 (모든 도구가 기억됨) 는 한 번만 렌더링하는 것을 알 수 있습니다.

요약

우리는 useMemo와 useCallback가 React.memo() 함수와 결합하여 사용할 때 하위 React 구성 요소의 재렌더링을 방지하는 데 어떻게 효과적으로 사용되는지 연구했다.
주의해야 할 점은 다음과 같습니다.

React API는 구성 요소가 다시 나타나지 않을 것을 보장할 수 없지만 최적화는 매우 신뢰할 수 있어야 한다.

연결useMemo 또는 useCallback 연결에 부작용을 포함하지 않는 것을 권장합니다.부작용은 useEffect연결에 집중해야 한다.

코드 예

다음을 확인하십시오.
https://alixfachin.github.io/react-test-rendering/
실행 중인 코드를 보십시오.

감사합니다

https://felixgerschau.com/react-rerender-components/ React 렌더링 구성 요소에 대한 자세한 게시물을 얻습니다.

https://learnreact.design/posts/react-useref-by-example 연결에 대한 상세한 강좌를 얻습니다.

질문이나 의견이 있으면 언제든지 연락 주세요.
GIT915:(GIT915)
영영:
트위터: