Reduce React render ulang dengan mlyn.

Masalahnya: Anda memiliki aplikasi, di mana status pembaruan komponen, yang harus ditampilkan di bagian aplikasi yang sama sekali berbeda. Solusi paling sederhana adalah dengan "mengebor" nilai melalui hierarki komponen Anda.

Misalkan aplikasi berikut:

Ini hanya memiliki 4 komponen:

• App : wadah aplikasi (mendeklarasikan status)
• A : Penggeser
• B : div tempat nilai slider dirender
• C : wadah 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>
  );
});

Jika kita ingin memperbarui nilai tampilan slide di B , inilah yang akan terjadi pada setiap pembaruan

Mlyn memecahkan masalah ini dengan memperkenalkan nilai proxy yang disebut mata pelajaran. Anda dapat meneruskan mata pelajaran tersebut (atau sebagiannya) kepada anak-anak Anda dan berlangganan / memperbarui hanya jika diperlukan. Mari tinjau migrasi kode di atas dengan langkah-langkah:

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

Nilai progress$subjek dapat diteruskan melalui komponen lain dari aplikasi Anda. Namun, hanya komponen tempat Anda berlangganan subjek yang akan dirender ulang.

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