Mengenali cangkuk react usereducer

Hook useReducer React, yang diperkenalkan dalam React 16.7.0, menyediakan cara yang kuat untuk menguruskan keadaan aplikasi yang kompleks. Ia mengambil fungsi reducer dan keadaan awal, mengembalikan keadaan semasa dan fungsi penghantaran. Ini berbeza dengan useState , yang lebih sesuai untuk pengurusan negeri yang lebih mudah.

Inti useReducer adalah fungsi reducernya, mencerminkan kaedah reduce JavaScript. Reducer sentiasa mengembalikan satu nilai (nombor, rentetan, array, atau objek), dengan berkesan "mengurangkan" input berganda ke satu output. Ini menjadikannya sesuai untuk menggunakan logik kepada pelbagai nilai dan menghasilkan hasil yang disatukan.

Sebagai contoh, pertimbangkan untuk merumuskan pelbagai nombor:

 nombor const = [1, 2, 3];
const reducer = (tally, nombor) => nombor tally;
const total = number.reduce (reducer, 0); // Jumlah akan menjadi 6

useReducer memanjangkan konsep ini kepada pengurusan negeri:

 const [State, Dispatch] = userEducer (reducer, initialState, init);

Di sini, initialState menetapkan keadaan permohonan awal. Fungsi init pilihan malas mengira keadaan awal, berguna apabila nilai awal bergantung kepada faktor lain. Cangkuk mengembalikan state semasa dan fungsi dispatch untuk mengemas kini keadaan.

Untuk menggambarkan, mari kita bina customizer kereta:

Pertama, tentukan keadaan awal:

 const initialState = {
  Tambahan: 0,
  kereta: {
    Harga: 26395,
    Nama: "2019 Ford Mustang",
    Imej: "https://cdn.motor1.com/images/mgl/0an2v/s1/2019-ford-mustang-bullitt.jpg",
    Ciri -ciri: []
  },
  Kedai: [
    // ... (senarai ciri yang ada) ...
  ]
};

Seterusnya, buat fungsi reducer untuk mengendalikan penambahan dan mengeluarkan ciri:

 const reducer = (state, action) => {
  suis (action.type) {
    kes "add_feature":
      // ... (logik untuk menambah ciri dan harga kemas kini) ...
      rehat;
    Kes "Remove_Feature":
      // ... (logik untuk mengeluarkan ciri dan harga kemas kini) ...
      rehat;
    Lalai:
      Kembali ke negeri;
  }
};

Komponen aplikasi kemudian akan menggunakan useReducer untuk menguruskan tindakan negeri dan menghantar berdasarkan interaksi pengguna.

Bilakah memilih useReducer melalui useState ? useReducer bersinar apabila peralihan keadaan adalah kompleks atau apabila satu elemen negeri bergantung kepada yang lain. Untuk keadaan yang lebih mudah, useState mencukupi. Walaupun useReducer boleh mencapai fungsi yang sama dengan Redux, Redux menawarkan ciri-ciri tambahan seperti middleware dan debugging perjalanan masa yang mungkin diperlukan untuk aplikasi yang sangat besar. Walau bagaimanapun, bagi banyak projek, useReducer menyediakan penyelesaian yang lebih ringan dan cekap untuk menguruskan keadaan kompleks.

Atas ialah kandungan terperinci Mengenali cangkuk react usereducer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!