Underrated React Hook - useSyncExternalStore

Gambaran keseluruhan

Temui kuasa tersembunyi dalam ekosistem React: cangkuk "useSyncExternalStore". Artikel ini mengupas potensi transformatifnya, mencabar paradigma pengurusan negeri tradisional. Dengan menyepadukan sumber data luaran dengan lancar dan meningkatkan komunikasi merentas komponen, cangkuk ini menawarkan pendekatan yang tidak konvensional lagi berkuasa.

Perjalanan bersama kami sambil kami mentafsirkan useSyncExternalStore. Kami akan membedah mekaniknya, mendedahkan faedahnya dan mempamerkan aplikasi praktikal melalui contoh dunia sebenar. Pada akhirnya, anda akan memahami cara menggunakan cangkuk ini untuk menyelaraskan kerumitan, meningkatkan prestasi dan membawa tahap organisasi baharu ke pangkalan kod anda.

Penggunaan

Menurut React, useSyncExternalStore ialah React Hook yang membolehkan anda melanggan kedai luaran. Tetapi apakah sebenarnya "kedai luaran" itu? Ia benar-benar memerlukan 2 fungsi:

• Fungsi langgan harus melanggan kedai dan mengembalikan fungsi yang berhenti melanggan.
• Fungsi getSnapshot harus membaca petikan data daripada kedai. Okey ia mungkin sukar untuk diperoleh pada mulanya. Kita boleh pergi ke contoh.

Demo

Untuk demo kami hari ini, saya akan menggunakan aplikasi klasik: "Senarai Todo".

Kedai

Pertama, kita perlu mentakrifkan keadaan awal:

export type Task = {
  id: string;
  content: string;
  isDone: boolean;
};

export type InitialState = {
  todos: Task[];
};

export const initialState: InitialState = { todos: [] };

Anda boleh melihat bahawa saya menentukan jenis dan kemudian mencipta keadaan yang mempunyai todos sebagai tatasusunan kosong

Kini ialah pengurang:

export function reducer(state: InitialState, action: any) {
  switch (action.type) {
    case "ADD_TASK":
      const task = {
        content: action.payload,
        id: uid(),
        isDone: false,
      };
      return {
        ...state,
        todos: [...state.todos, task],
      };

    case "REMOVE_TASK":
      return {
        ...state,
        todos: state.todos.filter((task) => task.id !== action.payload),
      };

    case "COMPLETE_TASK":
      const tasks = state.todos.map((task) => {
        if (task.id === action.payload) {
          task.isDone = !task.isDone;
        }
        return task;
      });
      return {
        ...state,
        todos: tasks,
      };

    default:
      return state;
  }
}

Pengurang kami hanya mempunyai 3 tindakan: ADD_TASK, REMOVE_TASK dan COMPLETE_TASK. Ini ialah contoh klasik logik senarai tugasan.

Akhir sekali, apa yang kita tunggu, kedai:

let listeners: any[] = [];

function createStore(reducer: any, initialState: InitialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function dispatch(action: any) {
    state = reducer(state, action);

    emitChange();
  }

  function subscribe(listener: any) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }

  const store = {
    dispatch,
    getState,
    subscribe,
  };

  return store;
}

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

export const store = createStore(reducer, initialState);

Coretan kod ini menggambarkan penciptaan sistem pengurusan keadaan seperti Redux yang ringkas dalam TypeScript. Berikut ialah pecahan cara ia berfungsi:

1. Array pendengar: Tatasusunan ini menyimpan senarai fungsi pendengar yang akan dimaklumkan apabila keadaan berubah.

2. Fungsi createStore: Fungsi ini bertanggungjawab untuk mencipta kedai gaya Redux. Ia memerlukan dua parameter:

• pengurang: Fungsi pengurang yang bertanggungjawab untuk mengira keadaan seterusnya berdasarkan keadaan semasa dan tindakan yang dihantar.
• initialState: Keadaan awal aplikasi.

1. keadaan: Pembolehubah ini mengekalkan keadaan semasa aplikasi.

2. Fungsi getState: Mengembalikan keadaan semasa.

3. Fungsi penghantaran: Menerima objek tindakan, menyerahkannya kepada pengurang bersama-sama keadaan semasa, mengemas kini keadaan dengan hasilnya, dan kemudian memanggil fungsi emitChange untuk memberitahu pendengar tentang perubahan keadaan.

4. Fungsi melanggan: Menerima fungsi pendengar, menambahkannya pada tatasusunan pendengar dan mengembalikan fungsi pembersihan yang boleh dipanggil untuk mengalih keluar pendengar.

5. Objek kedai: Objek kedai yang dibuat memegang rujukan kepada fungsi penghantaran, getState dan langganan.

6. Fungsi emitChange: Mengulang melalui tatasusunan pendengar dan memanggil setiap fungsi pendengar, memberitahu mereka tentang perubahan keadaan.

Pada penghujung kod, kedai dibuat menggunakan fungsi createStore, dengan pengurang dan keadaan awal yang diberikan. Kedai ini kini boleh diimport dan digunakan di bahagian lain aplikasi untuk mengurus dan mengawal negeri.

Perlu ambil perhatian bahawa kod ini menyediakan perlaksanaan sistem pengurusan negeri yang dipermudahkan dan tidak mempunyai beberapa ciri dan pengoptimuman lanjutan yang terdapat dalam perpustakaan seperti Redux. Walau bagaimanapun, ia berfungsi sebagai titik permulaan yang baik untuk memahami konsep asas pengurusan negeri menggunakan pendengar dan fungsi pengurang.

Untuk menggunakan cangkuk useSyncExternalStore. Kita boleh mendapatkan negeri seperti ini:

const { todos } = useSyncExternalStore(store.subscribe, store.getState);

Dengan panggilan cangkuk ini, kami boleh mengakses kedai secara global dan dinamik, sambil mengekalkan kebolehbacaan dan kebolehselenggaraan

Kebaikan dan Keburukan

Cakuk "useSyncExternalStore" membentangkan kedua-dua kelebihan dan potensi kelemahan dalam konteks pengurusan keadaan dalam aplikasi React:

Kelebihan:

1. Pengintegrasian Lancar dengan Sumber Luaran: Cangkuk itu membolehkan penyepaduan mudah dengan sumber data luaran, mempromosikan pendekatan bersepadu kepada pengurusan negeri. Penyepaduan ini boleh memudahkan pengendalian data daripada pelbagai asal, mempertingkatkan kesepaduan aplikasi.

2. Komunikasi Merentas Komponen: “useSyncExternalStore” memudahkan komunikasi yang cekap antara komponen, memperkemas perkongsian data dan mengurangkan keperluan untuk penggerudian prop yang kompleks atau pengurusan konteks.

3. Peningkatan Prestasi: Dengan memusatkan pengurusan negeri dan meminimumkan penyebaran kemas kini negeri, cangkuk ini berpotensi untuk mengoptimumkan prestasi pemaparan, menghasilkan aplikasi yang lebih responsif dan cekap.

4. Kod Kesederhanaan dan Bersih: API abstrak cangkuk boleh membawa kepada kod yang lebih bersih dan teratur, menjadikannya lebih mudah untuk difahami dan diselenggara, terutamanya dalam aplikasi berskala besar.

5. Boilerplate Dikurangkan: "useSyncExternalStore" mungkin mengurangkan keperluan untuk menulis kod berlebihan untuk pengurusan negeri, menyediakan cara yang ringkas dan konsisten untuk mengurus keadaan seluruh aplikasi.

Keburukan:

1. Keluk Pembelajaran: Pembangun yang tidak biasa dengan cangkuk ini mungkin mengalami keluk pembelajaran apabila beralih daripada penyelesaian pengurusan negeri yang lebih mantap. Menyesuaikan diri dengan pendekatan baharu pada mulanya boleh melambatkan pembangunan.

2. Had Penyesuaian: Kefungsian pratakrif cangkuk mungkin tidak sejajar dengan sempurna dengan keperluan unik setiap aplikasi. Menyesuaikan tingkah laku di luar keupayaan cangkuk mungkin memerlukan penyelesaian tambahan.

3. Overhed Abstraksi Berpotensi: Bergantung pada mekanik dalamannya, cangkuk mungkin memperkenalkan sedikit overhed dalam prestasi atau penggunaan memori berbanding dengan penyelesaian yang lebih dioptimumkan yang disesuaikan khusus untuk keperluan aplikasi.

4. Komuniti dan Ekosistem: Sebagai cangkuk yang dipandang rendah atau kurang dikenali, "useSyncExternalStore" mungkin kekurangan komuniti yang mantap dan ekosistem yang komprehensif, yang berpotensi mengakibatkan sumber yang tersedia lebih sedikit atau perpustakaan pihak ketiga .

5. Keserasian dan Kemas Kini Masa Hadapan: Keserasian dengan versi masa depan React dan kemungkinan kemas kini pada cangkuk itu sendiri boleh menjadi perhatian. Memastikan sokongan jangka panjang dan peningkatan yang lancar mungkin memerlukan ketekunan tambahan.

Kesimpulan

Ringkasnya, useSyncExternalStore menawarkan pendekatan unik kepada pengurusan negeri, menekankan penyepaduan yang lancar dan komunikasi merentas komponen. Walaupun ia memberikan beberapa faedah, seperti prestasi yang dipertingkatkan dan kod yang dipermudahkan, pembangun harus menilai dengan teliti keserasiannya dengan keperluan projek mereka dan mempertimbangkan potensi keluk dan pengehadan pembelajaran.

Atas ialah kandungan terperinci Underrated React Hook - useSyncExternalStore. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!