Zmniejsz ponowne renderowanie React za pomocą mlyn.

Problem: masz aplikację, w której stan aktualizacji komponentu powinien być wyświetlany w zupełnie innej części aplikacji. Najprostszym rozwiązaniem byłoby „przewiercenie” wartości przez hierarchię komponentów.

Załóżmy, że następująca aplikacja:

Ma tylko 4 składniki:

• App : kontener aplikacji (deklaruje stan)
• Odp .: suwak
• B : div gdzie wyświetlana jest wartość suwaka
• C : pojemnik 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>
  );
});

Jeśli chcemy zaktualizować wyświetlaną wartość slajdu w B , tak się stanie przy każdej aktualizacji

Mlyn rozwiązuje ten problem, wprowadzając wartości zastępcze zwane podmiotami. Możesz przekazać te przedmioty (lub ich części) swoim dzieciom i subskrybować / aktualizować tylko w razie potrzeby. Przyjrzyjmy się migracji powyższego kodu według kroków:

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);
      }}
    />
  );
};

Wartość progress$tematu może być przekazywana przez inne składniki Twojej aplikacji. Jednak tylko ten komponent, w którym subskrybujesz temat, zostanie ponownie wyrenderowany.

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>
  );
};