Bolehkah bertindak balas melaksanakan suntikan pergantungan?

react boleh melaksanakan suntikan pergantungan. Kaedah pelaksanaan: 1. Gunakan prop untuk melaksanakan suntikan dependensi, seperti "function welcome(props){return...}"; .

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Bolehkah React melaksanakan suntikan pergantungan?

Bolehkah React melaksanakan suntikan pergantungan?

Kod biasa berikut sebenarnya menggunakan idea suntikan pergantungan , mari lihat beberapa contoh:

1 Gunakan prop untuk membenarkan suntikan kebergantungan

function welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}

Komponen selamat datang menerima prop dan kemudian menjana html terkejut, kami akhirnya prop yang biasa digunakan sebenarnya menggunakan idea suntikan pergantungan.

2. Menggunakan konteks ialah cara lain untuk melaksanakan suntikan pergantungan

function counter() {
  const { message } = useContext(MessageContext);
  return <p>{ message }</p>;
}

Memandangkan konteks diturunkan di sepanjang pepohon komponen, kita boleh menggunakan komponen Cangkuk dalaman untuk mengekstrak ia.

3. Suntikan ketergantungan juga boleh dicapai menggunakan jsx sahaja

const ReviewList = props => ( 
  <List resource="/reviews" perPage={50} {...props}> 
    <Datagrid rowClick="edit"> 
      <DateField source="date" /> 
      <CustomerField source="customer_id " /> 
      <ProductField source="product_id" /> 
      <StatusField source="status" /> 
    </Datagrid> 
  </List> 
);

Parameter perPage dihantar ke komponen data jauh melalui REST API .

Walau bagaimanapun, komponen tidak memberikan data secara langsung, sebaliknya, ia menyerahkan tanggungjawab untuk memberikan data kepada sub-komponen . Paparan komponen bergantung pada dan

Walau bagaimanapun, strategi ini mungkin membantu untuk projek yang lebih kecil. Dalam sesetengah projek besar, kami sering memerlukan sambungan yang lebih fleksibel Selain daripada aplikasi asas ini, kami juga perlu menyokong suntikan pergantungan dengan lebih baik.

Mari lihat beberapa perpustakaan yang melanjutkan sokongan suntikan kebergantungan React.

InversifyJS

InversifyJS ialah perpustakaan suntikan pergantungan ringan yang berkuasa dan sangat mudah untuk digunakan. , tetapi masih terdapat beberapa masalah menggunakannya dengan komponen React.

Oleh kerana InversifyJS menggunakan suntikan pembina secara lalai, tetapi React tidak membenarkan pembangun memanjangkan pembina komponen. Mari kita ambil contoh untuk melihat cara menyelesaikan masalah ini:

inversify-inject-decorators

Perpustakaan alat ini terutamanya menyediakan kaedah seperti lazyInject, yang boleh memberikan Terdapat suntikan malas, yang bermaksud bahawa tidak perlu menyediakan kebergantungan apabila objek dimulakan Perpustakaan ini berguna apabila kita tidak boleh menukar pembina.

Selain itu, sebagai tambahan kepada kemalasan literal, satu lagi ciri yang sangat penting ialah ia membolehkan anda menyepadukan inversifyJs ke dalam mana-mana perpustakaan atau rangka kerja yang mengawal penciptaan tika kelas, seperti React.

inversify-react

inversify-react ialah perpustakaan yang hanya melakukan suntikan kebergantungan. Sama seperti menggunakan React Context.Provider, kita juga boleh mendapatkan Pembekal daripada perpustakaan ini:

react-inversify

Walaupun namanya hampir sama dengan pustaka sebelumnya, Tetapi pendekatan kedua-dua perpustakaan adalah berbeza Kaedah ini lebih dekat dengan idea React, kerana objek diluluskan sebagai harta dan bukannya instantiated di dalam komponen.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bolehkah bertindak balas melaksanakan suntikan pergantungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!