Reduzieren Sie Re-Renderings mit mlyn.

Das Problem: Sie haben eine Anwendung, bei der eine Komponente aktualisiert wird, die in einem ganz anderen Teil der App angezeigt werden soll. Die einfachste Lösung wäre, den Wert durch Ihre Komponentenhierarchie zu „prop-drillen“.

Angenommen, die folgende App:

Es hat nur 4 Komponenten:

• App : Anwendungscontainer (deklariert den Zustand)
• A : Schieberegler
• B : div wo der Wert des Schiebereglers gerendert wird
• C : Behälter von B

import React, { useState } from "react";
const A = React.memo(({ progress, setProgress }) => {
  return (
    <input
      type="range"
      value={progress}
      onChange={(e) => {setProgress(e.target.value);}}
    />
  );
});
const B = React.memo(({ progress }) => {
  console.log(">>> render B");
  return <div>{progress}</div>;
});
const C = React.memo(({ progress }) => {
  console.log(">>> render C:", progress);
  return (
    <div style={{ padding: 10, backgroundColor: "yellow" }}>
      <B progress={progress} />
    </div>
  );
});
export const App = React.memo(() => {
  const [progress, setProgress] = useState(0);
  console.log(">>> render App");
  return (
    <div>
      <A progress={progress} setProgress={setProgress} />
      <C progress={progress} setProgress={setProgress} />
    </div>
  );
});

Wenn wir den Anzeigewert der Folie in B aktualisieren möchten, geschieht dies bei jedem Update

Mlyn löst dieses Problem durch die Einführung von Proxy-Werten, die Subjekte genannt werden. Sie können diese Themen (oder Teile davon) an Ihre Kinder weitergeben und nur bei Bedarf abonnieren / aktualisieren. Lassen Sie die Migration des obigen Codes in Schritten überprüfen:

export const App = () => {
  const progress$ = useSubject(0);
  console.log(">>> render App");
  return (
    <div>
      <A progress$={progress$} />
      <C progress$={progress$} />
    </div>
  );
};

const A = ({ progress$ }) => {
  const progress = useSubjectValue(progress$);
  return (
    <input
      type="range"
      value={progress}
      onChange={(e) => {
        progress$(e.target.value);
      }}
    />
  );
};

Der Wert des progress$Betreffs kann an andere Komponenten Ihrer App übergeben werden. Es wird jedoch nur die Komponente neu gerendert, in der Sie den Betreff abonniert haben.

const B = ({ progress$ }) => {
  console.log(">>> render B");
  const progress = useSubjectValue(progress$);
  return <div>{progress}</div>;
};
const C = ({ progress$ }) => {
  console.log(">>> render C");
  return (
    <div style={{ padding: 10, backgroundColor: "yellow" }}>
      <B progress$={progress$} />
    </div>
  );
};