React 기본~렌더링 성능/ useCallback

• 메모가 하위 컴포넌트로 설정되어 있어도 하위 컴포넌트를 다시 렌더링할 수 있습니다.

• 자식 컴포넌트에 props로 함수를 전달한 경우입니다.

・src/Example.js

import React, { useCallback, useState } from "react";
import Child from "./Child";

const Example = () => {
  console.log("Parent render");

  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);

  const clickHandler = () => {
    setCountB((pre) => pre + 1);
  };

  return (
    <div className="parent">
      <div>
        <h3>Parent component</h3>
        <div>
          <button
            onClick={() => {
              setCountA((pre) => pre + 1);
            }}
          >
            button A
          </button>
          <span>Update parent component</span>
        </div>
      </div>
      <div>
        <p>The count of click button A：{countA}</p>
      </div>
      <Child countB={countB} onClick={clickHandler} />
    </div>
  );
};

export default Example;

・src/Child.js

import { memo } from "react";

const ChildMemo = memo(({ countB, onClick }) => {
  console.log("%cChild render", "color: red;");

  return (
    <div className="child">
      <h2>Child component</h2>
      <div>
        <button onClick={onClick}>button B</button>
        <span>Uodate child component</span>
      </div>
      <span>The count of click button B ：{countB}</span>
    </div>
  );
});

export default ChildMemo;

• 하위 구성 요소가 다시 렌더링되는 이유는 src/Example.js의 clickHandler 함수 때문입니다.

  const clickHandler = () => {
    setCountB((pre) => pre + 1);
  };

• 이 함수는 onClick props로 하위 구성 요소에 전달됩니다.

 <Child countB={countB} onClick={clickHandler} />

• useCallback으로 하위 구성 요소를 래핑하면 이러한 상황을 피할 수 있습니다.

  const clickHandler = useCallback(() => {
    setCountB((pre) => pre + 1);
  }, []);

위 내용은 React 기본~렌더링 성능/ useCallback의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!