Konteks Reaksi ialah Pembolehubah Global

Dalam Javascript, pembolehubah diskop dalam definisi fungsi.

Menjelaskan Konteks Skop dalam Reaksi dengan Contoh

Konteks React sering digambarkan sebagai mekanisme untuk mengurus keadaan global, bertindak sebagai pembolehubah kongsi yang boleh diakses merentas pepohon komponen React. Walaupun penerangan ini tepat, ia terlalu memudahkan keupayaan Konteks. Dalam artikel ini, kita akan menyelami cara merangkum Konteks dengan berkesan, memastikan ia digunakan hanya apabila perlu dan mengelakkan paparan semula yang tidak perlu.

Apakah Konteks Reaksi?

Konteks React menyediakan cara untuk menghantar data melalui pepohon komponen tanpa perlu menghantar prop secara manual di setiap peringkat. Ia dibuat menggunakan React.createContext dan terdiri daripada pasangan Pembekal dan Pengguna. Komponen Pembekal membekalkan nilai dan mana-mana komponen yang dibalut dengan Pengguna atau cangkuk useContext boleh mengaksesnya.

Berikut ialah contoh asas:

import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{`Theme: ${theme}`}</button>;
}

export default App;

Dalam contoh ini, ThemedButton boleh mengakses nilai tema yang disediakan oleh ThemeContext.Provider tanpa secara eksplisit menghantar prop melalui Bar Alat.

Mengapa Konteks Skop?

Walaupun Konteks berkuasa, menggunakannya secara sembarangan boleh membawa kepada isu prestasi. Apabila nilai yang disediakan oleh Context.Provider berubah, semua komponen yang menggunakan konteks tersebut akan dipaparkan semula. Dalam aplikasi yang kompleks, ini boleh menyebabkan pemaparan semula yang tidak perlu bagi komponen yang tidak berkaitan.

Konteks Skop merujuk kepada amalan mengehadkan penggunaan Konteks kepada bahagian pokok komponen yang benar-benar memerlukannya sahaja. Pendekatan ini membantu mengekalkan prestasi dan memastikan struktur komponen bersih dan mudah difahami.

Cabaran dalam Komponen Kompaun

Pertimbangkan senario yang melibatkan komponen kompaun, seperti yang disediakan oleh perpustakaan seperti Radix Primitives. Komponen ini sering menggunakan Konteks secara dalaman untuk mengurus keadaan dan interaksi. Walau bagaimanapun, isu boleh timbul apabila komponen yang serupa digubah bersama, yang membawa kepada perlanggaran konteks.

Contoh dengan Radix Primitives

Radix Primitives menyediakan API yang sangat boleh digubah untuk membina komponen yang boleh diakses. Berikut ialah contoh:

<AlertDialog.Root>
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Content>
      <AlertDialog.Trigger /> {/* note the alert trigger in dialog content */}
    </Dialog.Content>
  </Dialog.Root>

  <AlertDialog.Content />
</AlertDialog.Root>

Isu timbul di sini kerana AlertDialog ialah gubahan Dialog dengan fungsi tambahan untuk memenuhi keperluan AlertDialog. Ini bermakna AlertDialog.Root juga ialah Dialog.Root, jadi ia menyediakan DialogContext dan AlertDialogContext.

Dalam persediaan ini, AlertDialog.Trigger (yang juga Dialog.Trigger) mungkin mendapatkan semula konteks yang salah melalui useContext(DialogContext), berakhir dengan konteks daripada Dialog.Root dan bukannya AlertDialog.Root. Akibatnya, mengklik AlertDialog.Trigger boleh menogol Dialog.Kandungan dan bukannya berkelakuan seperti yang dimaksudkan.

Penyelesaian Konteks Skop

Untuk mengelakkan isu sedemikian, Radix Primitives menggunakan konteks berskop. Konteks skop memastikan AlertDialog.Trigger hanya berinteraksi dengan bahagian AlertDialog dan tidak mengambil semula konteks secara tidak sengaja daripada komponen yang serupa. Ini dicapai dengan mencipta konteks baharu secara dalaman dan menghantarnya kepada komponen Dialog melalui prop tersuai, seperti __scopeDialog. Komponen Dialog kemudian menggunakan konteks berskop ini dalam panggilan useContextnya, memastikan pengasingan.

Kod sumber daripada repo radix ui github:

https://github.com/radix-ui/primitives/blob/dae8ef4920b45f736e2574abf23676efab103645/packages/react/dialog/src/Dialog.tsx#L69

Berikut ialah abstraksi cara konteks berskop berfungsi dalam UI Radix:

1. Penciptaan Skop: Utiliti createScope menjana ruang nama unik untuk setiap komponen atau komponen kompaun. Ini memastikan bahawa setiap set konteks diasingkan dan tidak bercanggah dengan orang lain.
   

   import React, { createContext, useContext } from "react";
   
   const ThemeContext = createContext("light");
   
   function App() {
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
       </ThemeContext.Provider>
     );
   }
   
   function Toolbar() {
     return <ThemedButton />;
   }
   
   function ThemedButton() {
     const theme = useContext(ThemeContext);
     return <button>{`Theme: ${theme}`}</button>;
   }
   
   export default App;
   

2. Pembekal Skop: Apabila membuat konteks, mereka terikat dengan skop. Ini mengikat penyedia dan pengguna pada ruang nama yang sama.
   

   <AlertDialog.Root>
     <Dialog.Root>
       <Dialog.Trigger />
       <Dialog.Content>
         <AlertDialog.Trigger /> {/* note the alert trigger in dialog content */}
       </Dialog.Content>
     </Dialog.Root>
   
     <AlertDialog.Content />
   </AlertDialog.Root>
   

3. Pengasingan Pengguna: Cangkuk berskop, seperti useDialogScope, memastikan pengguna hanya mengakses konteks daripada skop yang dimaksudkan.
   

   import { createScope } from '@radix-ui/react-context';
   
   const [createDialogContext, useDialogScope] = createScope('Dialog');
   

Faedah Konteks Skop

• Pencegahan Perlanggaran Konteks: Dengan merangkum konteks, komponen seperti AlertDialog.Trigger sentiasa boleh mencari konteks berkaitannya (AlertDialogContext), walaupun apabila bersarang di dalam konteks lain.

• Komposisi Fleksibel: Konteks skop membolehkan komposisi komponen yang fleksibel dan selamat, memastikan interaksi kekal boleh diramal.

• Kebolehgunaan semula: Pembangun boleh menggunakan semula komponen generik (cth. Dialog.Trigger) merentas skop berbeza tanpa pengubahsuaian.

Bagaimana Ia Terpakai pada Contoh

Dalam contoh anda:

• AlertDialog.Root mencipta AlertDialogContext berskop yang merangkumi keadaan dan interaksinya.

• Dialog Bersarang.Root dan AlertDialog.Pencetus wujud bersama tanpa konflik kerana masing-masing merujuk konteks skop masing-masing.

• Corak reka bentuk ini ialah ciri utama UI Radix, memastikan hierarki komponen yang kompleks berfungsi dengan lancar tanpa tingkah laku yang tidak diingini.

Rujukan:

1. https://dev.to/romaintrotard/use-context-selector-demystified-4f8e

2. https://github.com/radix-ui/primitives

3. https://react.dev/reference/react/createContext

Atas ialah kandungan terperinci Menjelaskan Konteks Skop dalam React dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!