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:

<ThemeContext.Provider value={theme}>
  <AuthContext.Provider value={currentUser}>
    <ModalContext.Provider value={modal}>
      <VolumeContext.Provider value={volume}>
        <RouterProvider router={router} />
      </VolumeContext.Provider>
    </ModalContext.Provider>
  </AuthContext.Provider>
</ThemeContext.Provider>

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: <div>Current theme: light</div>
  return <div>Current theme: {theme}</div>;
}

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!