Bases de React ~ Performances de rendu/mémo

• Ce sont des modèles que le composant enfant serait rendu.

1. Lorsque le composant parent est restitué, par exemple lors de la mise à jour de son état.

2. Lorsque les accessoires du composant enfant sont restitués.

Mais en réalité, cela n'est nécessaire que lorsque les accessoires sont rendus pour restituer le composant enfant. Tout le reste est inutile.

・src/Example.js

mport React, { useState } from "react";
import Child from "./Child";
import "./Example.css";

const Example = () => {
  console.log("Parent render");
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  return (
    <div className="parent">
      <div>
        <h3>Parent Component</h3>
        <div>
          <button
            onClick={() => {
              setCountA((pre) => pre + 1);
            }}
          >
            Button A
          </button>
          <span>Update the state of Parent Component</span>
        </div>
        <div>
          <button
            onClick={() => {
              setCountB((pre) => pre + 1);
            }}
          >
            Buton B
          </button>
          <span>Update the state of Child Component</span>
        </div>
      </div>
      <div>
        <p>The count of clicked：{countA}</p>
      </div>
      <Child countB={countB} />
    </div>
  );
};

export default Example;

・src/Child .js

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

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

export default Child;

• Dans ce cas, lorsque nous appuyons sur le bouton A (composant parent), le composant enfant est rendu. Même si c'est inutile.

・Comme ça.

・src/Child .js　(en utilisant un crochet mémo)

import { memo } from "react";

function areEqual(prevProps, nextProps) {
  if (prevProps.countB !== nextProps.countB) {
    return false; // re-rendered
  } else {
    return true; // not-re-rendred
  }
}

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

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

export default ChildMemo;

• Si nous utilisons un mémo, nous pouvons éviter un nouveau rendu inutile.

・Comme ça.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!