Cangkuk React Advanced: UserEducer, useContext, dan cangkuk tersuai

UserEducer sangat sesuai untuk logik keadaan kompleks dengan peralihan yang boleh diramal menggunakan tindakan dan fungsi reducer. 2. USEContext menghapuskan penggerudian prop dengan membolehkan akses ke negeri yang dikongsi di mana -mana di dalam pokok komponen apabila dipasangkan dengan pembekal. 3. Cangkuk tersuai seperti USEFetch Encapsulate dan Gunakan Logik di seluruh komponen, mempromosikan kod yang bersih dan dikekalkan. Bersama -sama, cangkuk canggih ini menyediakan pengurusan negeri berskala dan penggunaan semula logik tanpa perpustakaan luaran.

Apabila anda telah menguasai asas -asas React - useState , useEffect , dan kitaran hayat komponen - sudah tiba masanya. Cangkuk canggih seperti useReducer , useContext , dan cangkuk tersuai membantu anda menguruskan logik keadaan kompleks, berkongsi keadaan di seluruh komponen, dan pastikan kod anda bersih dan boleh diguna semula. Mari kita pecahkan bagaimana dan bila menggunakannya dengan berkesan.

1. UserEducer: Menguruskan Logik Negeri Kompleks

useState sangat bagus untuk keadaan mudah - kaunter, togol, atau input bentuk. Tetapi apabila logik negara anda menjadi lebih kompleks (sub-nilai sub-, peralihan berdasarkan keadaan terdahulu, atau tindakan yang bergantung kepada keadaan), useReducer bersinar.

Ia mengikuti corak Redux: anda menentukan fungsi reducer yang mengambil keadaan semasa dan tindakan, kemudian mengembalikan keadaan baru.

 const initialState = {count: 0};

fungsi counterReducer (keadaan, tindakan) {
  suis (action.type) {
    kes 'kenaikan':
      kembali {count: state.count 1};
    kes 'penurunan':
      kembali {count: state.count - 1};
    Kes 'Reset':
      kembali initialstate;
    Lalai:
      membuang ralat baru ();
  }
}

kaunter fungsi () {
  const [State, Dispatch] = userEducer (counterReducer, initialState);

  kembali (
    <dana>
      Kiraan: {state.count}
      <butang onclick = {() => Dispatch ({type: &#39;decrement&#39;})}>-</butang>
      <butang onclick = {() => Dispatch ({type: &#39;increment&#39;})}> </butang>
      <butang onclick = {() => Dispatch ({type: &#39;reset&#39;})}> reset </butang>
    </div>
  );
}

Mengapa menggunakan useReducer ?

• Memusatkan logik negeri di satu tempat.
• Menjadikan peralihan keadaan dapat diramal.
• Hebat untuk bentuk, penyihir, atau mana-mana aliran UI pelbagai langkah.
• Bekerja dengan baik dengan useContext untuk Negeri Global.

Petua: Anda juga boleh lulus fungsi pemula untuk useReducer untuk permulaan keadaan malas.

2. USEContext: Perkongsian Negeri di seluruh komponen

Melangkah props ke bawah melalui pelbagai peringkat (penggerudian prop) mendapat cepat kemas. useContext membolehkan anda mengakses keadaan bersama di mana -mana di dalam pokok komponen tanpa meluluskan alat peraga secara manual.

Menggabungkannya dengan useReducer untuk membina sistem negara global yang ringan.

 // Buat konteks
const countContext = react.CreateContext ();

// komponen penyedia
fungsi CountProvider ({Children}) {
  const [state, Dispatch] = userEducer (counterReducer, {count: 0});

  kembali (
    <CountContext.Provider Value = {{State, Dispatch}}>
      {anak}
    </Countcontext.provider>
  );
}

// cangkuk tersuai untuk menggunakan konteks (bersih dan lebih selamat)
fungsi useCount () {
  const context = useContext (countContext);
  jika (! Konteks) membuang ralat baru (&#39;useCount mesti digunakan dalam countprovider&#39;);
  Konteks kembali;
}

// Gunakannya jauh di dalam pokok
fungsi DeepComponent () {
  const {state, Dispatch} = useCount ();

  kembali (
    <dana>
      <p> Count: {state.count} </p>
      <butang onclick = {() => Dispatch ({type: &#39;increment&#39;})}> 1 </butang>
    </div>
  );
}

// bungkus aplikasi anda
aplikasi fungsi () {
  kembali (
    <UNLPROVIDER>
      <DeepComponent />
    </Countprovider>
  );
}

Amalan Terbaik:

• Sentiasa buat cangkuk tersuai untuk membungkus useContext - ia menghalang kesilapan dan meningkatkan kebolehgunaan semula.
• Gunakan untuk tema, auth, bahasa, atau mana-mana negeri yang luas.
• Elakkan terlalu banyak untuk segala -galanya - ia bukan pengganti semua pengurusan negeri.

3. Cangkuk tersuai: menggunakan semula logik, bukan hanya ui

Cangkuk tersuai adalah fungsi yang menggunakan cangkuk lain untuk merangkum dan menggunakan semula logik. Mereka bermula dengan use dan mengikuti peraturan yang sama seperti cangkuk biasa.

Katakan anda mengambil data di beberapa tempat. Daripada mengulangi useState dan useEffect , buat useFetch .

 fungsi useFetch (url) {
  const [data, setData] = useState (null);
  const [loading, setloading] = useState (true);
  const [ralat, setError] = useState (null);

  useeffect (() => {
    const fetchData = async () => {
      Cuba {
        const res = menunggu pengambilan (url);
        const json = menunggu res.json ();
        setData (JSON);
      } menangkap (err) {
        setError (err);
      } akhirnya {
        setloading (palsu);
      }
    };

    fetchData ();
  }, [url]);

  kembali {data, pemuatan, ralat};
}

Sekarang gunakannya di mana sahaja:

 fungsi userProfile ({userId}) {
  const {data, loading, error} = useFetch (`/api/users/$ {userId}`);

  jika (memuatkan) kembali <p> ​​memuatkan ... </p>;
  jika (ralat) return <p> error: {error.message} </p>;

  kembali <div> {data.name} </div>;
}

Lebih banyak idea untuk cangkuk tersuai:

• useLocalStorage : Sync State dengan localStorage .
• useForm : Mengendalikan input borang, pengesahan, penyerahan.
• useOutsideClick : Mengesan klik di luar elemen.
• useDebounce : Debounce nilai atau panggil balik.

Tingkah laku abstrak cangkuk adat yang baik, bukan hanya menyatakan. Ia harus membuat logik kompleks mudah digunakan.

Pemikiran terakhir

• useReducer membawa struktur ke kemas kini keadaan kompleks.
• useContext menghapuskan penggerudian prop dan membolehkan keadaan global (apabila digunakan dengan bijak).
• Cangkuk tersuai membolehkan anda mengekstrak dan menggunakan semula logik merentasi komponen.

Bersama -sama, mereka memberi kuasa kepada anda untuk menulis aplikasi React yang boleh diselaraskan, tanpa dapat mencapai perpustakaan luaran dengan segera.

Pada asasnya, apabila anda melewati asas-asas, alat-alat ini menjadi penting untuk menguruskan kerumitan dunia nyata-bersih dan cekap.

Atas ialah kandungan terperinci Cangkuk React Advanced: UserEducer, useContext, dan cangkuk tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!