Bases de React ~ Performances de rendu/mémo-js tutoriel-php.cn

Bases de React ~ Performances de rendu/mémo

DDD

Libérer： 2024-10-14 16:35:31

original

1010 Les gens l'ont consulté

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

Lorsque le composant parent est restitué, par exemple lors de la mise à jour de son état.
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;

Copier après la connexion

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

Copier après la connexion

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.
React Basics~Render Performance/ memo

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

Copier après la connexion