Jangan gunakan React.Context, buat cangkuk.

Dalam artikel ini, kita akan melihat cara untuk menyingkirkan React.Context dalam apl anda dan mencari motivasi untuk berbuat demikian.

Anda mungkin biasa dengan React dan mungkin sudah mempunyai pengalaman dengan React.Konteks jika anda sampai di artikel ini, tetapi jika tidak, sila baca juga dan kongsi dengan orang yang mungkin berminat.

---

1. Mengapa mengelakkan React.Context?

Konteks merendahkan kebolehbacaan, menjerat dan menyekat apl.

Cukup lihat contoh asas ini:

98a86725d72d98f2b9cabc482365e7f8
  4b90a298546767af0dfbf93180d488e9
    9ccdbad4d7cf2a5ab2f30697c3e282f0
      805c6193b8bd78f920c172a82a0e8e47
        5b13746435d164e45e11fb6d2c565337
      98e42f95a9cd80104723307a01d2a42d
    37fe62713bcc433be054e66f06fcb3ad
  30fcab49531d609f912afed89b90ce7e
f27e91231f5585982d1354585706ae4a

Nampak tidak terlalu mudah difahami dan boleh dipercayai, bukan?

Berikut ialah beberapa isu yang berpotensi apabila menggunakan konteks:

1. Semakin banyak konteks digunakan, semakin kurang boleh dibaca dan dikawal apl anda;
2. Kadangkala konteks bersarang memerlukan susunan yang betul untuk berfungsi, yang menjadikan apl anda sukar untuk diselenggara;
3. Sesetengah konteks harus digunakan semula semasa persediaan persekitaran ujian untuk terus berfungsi dengan betul;
4. Anda perlu memastikan komponen itu adalah anak turunan daripada penyedia konteks yang diperlukan.

Fakta menggembirakan: "janji-neraka" yang terkenal kelihatan serupa ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

---

2. Bagaimana untuk menggantikan React.Context?

Buat cangkuk sebaliknya.

Mari kita gantikan ThemeContext daripada contoh di atas dengan cangkuk useTheme tersuai:

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

Kami menggunakan pakej npm yang dipanggil use-app-events untuk membenarkan semua kejadian cangkuk useTheme berkomunikasi untuk menyegerakkan keadaan tema mereka. Ia memastikan bahawa nilai tema akan sama apabila useTheme dipanggil beberapa kali di sekeliling apl.

Selain itu, terima kasih kepada pakej use-app-events, tema akan disegerakkan walaupun antara tab penyemak imbas.

Pada ketika ini, ThemeContext tidak lagi diperlukan kerana cangkuk useTheme boleh digunakan di mana-mana dalam apl untuk mendapatkan tema semasa dan mengemas kininya:

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: light16b28748ea4df4d9c2150843fecfba68
  return dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: {theme}16b28748ea4df4d9c2150843fecfba68;
}

Apakah kebaikan pendekatan:

1. Tidak perlu memasang cangkuk di suatu tempat di atas pokok sebelum kanak-kanak boleh menggunakannya (termasuk persekitaran ujian);
2. Struktur pemaparan lebih bersih, bermakna tiada lagi struktur berbentuk anak panah yang mengelirukan yang dibina daripada konteks anda;
3. Keadaan disegerakkan antara tab.

---

Kesimpulan

React.Context ialah alat yang berkuasa suatu masa dahulu yang pasti, tetapi cangkuk menyediakan cara yang lebih terkawal dan boleh dipercayai untuk mengurus keadaan global apl anda jika dilaksanakan dengan betul bersama-sama dengan pakej use-app-events.

Atas ialah kandungan terperinci Jangan gunakan React.Context, buat cangkuk.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!