React Basics~Render Performance/ useCallback-js-Tutorial-php.cn

React Basics~Render Performance/ useCallback

Linda Hamilton

Freigeben： 2024-10-16 22:44:02

Original

507 Leute haben es durchsucht

Auch wenn das Memo auf eine untergeordnete Komponente festgelegt ist, kann die untergeordnete Komponente dennoch erneut gerendert werden.
Es kommt vor, dass wir eine Funktion als Requisiten an die untergeordnete Komponente übergeben.

・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;

Nach dem Login kopieren

・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;

Nach dem Login kopieren

Der Grund für das erneute Rendern der untergeordneten Komponente liegt in der clickHandler-Funktion in src/Example.js

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

Nach dem Login kopieren

Diese Funktion wird als onClick-Requisite an die untergeordnete Komponente übergeben.

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

Nach dem Login kopieren

Wenn wir die untergeordnete Komponente mit einem useCallback umschließen, können wir diesen Fall vermeiden.

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

Nach dem Login kopieren

React Basics~Render Performance/ useCallback

Das obige ist der detaillierte Inhalt vonReact Basics~Render Performance/ useCallback. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!