Artikel ini meneroka mekanisme kerja, fungsi ketegangan React dan bagaimana untuk mengintegrasikan dalam aplikasi web sebenar. Kami akan belajar bagaimana mengintegrasikan penghalaan dan pemuatan data dengan ketegangan dalam React. Untuk penghalaan, saya akan menggunakan JavaScript asli dan menggunakan perpustakaan graphQL mikro-graphql saya sendiri untuk pemprosesan data.

Jika anda sedang mempertimbangkan menggunakan Router React, ia kelihatan hebat, tetapi saya tidak pernah mempunyai peluang untuk menggunakannya. Projek peribadi saya sendiri mempunyai penyelesaian penghalaan yang cukup mudah yang selalu saya lakukan secara manual. Di samping itu, menggunakan JavaScript asli akan memberi kita pemahaman yang lebih baik tentang bagaimana ketegangan berfungsi.

Latar belakang ringkas

Mari kita bercakap mengenai ketegangan itu sendiri. Kingsley Silas memberikan gambaran keseluruhan yang komprehensif, tetapi perkara pertama yang perlu diperhatikan ialah ia masih API eksperimen. Ini bermakna -dan dokumentasi React mengatakan begitu -jangan gunakannya untuk bekerja dalam persekitaran pengeluaran. Ia boleh berubah pada bila -bila masa sehingga selesai sepenuhnya, jadi ingatlah ini.

Iaitu, teras ketegangan terletak pada mengekalkan UI yang konsisten apabila kebergantungan tak segerak (seperti komponen reaksi malas malas, data GraphQL, dll.). Suspense menyediakan API peringkat rendah yang membolehkan anda dengan mudah mengekalkan UI apabila aplikasi anda menguruskan kandungan ini.

Tetapi dalam kes ini, apakah maksud "konsisten"? Ini bermakna UI yang diselesaikan sebahagiannya tidak diberikan. Ini bermakna jika terdapat tiga sumber data pada halaman, salah satunya selesai, kami tidak mahu menjadikan serpihan keadaan terkini, dan penunjuk beban untuk dua lagi serpihan keadaan yang sudah lapuk di sebelahnya.

Apa yang kita mahu lakukan adalah menunjukkan kepada pengguna bahawa data dimuatkan, sambil terus memaparkan UI lama, atau memaparkan UI alternatif untuk menunjukkan bahawa kita sedang menunggu data; Suspense menyokong kedua -duanya, yang saya akan lebih terperinci kemudian.

Fungsi ketegangan yang tepat

Ini lebih mudah daripada yang kelihatannya. Secara tradisinya, dalam React, anda menetapkan status dan UI anda akan dikemas kini. Hidup ini mudah. Tetapi ia juga membawa kepada ketidakkonsistenan dalam jenis yang disebutkan di atas. Suspense menambah ciri yang membolehkan komponen untuk memberitahu React apabila membuatnya sedang menunggu data tak segerak; Ini dipanggil hang, yang boleh berlaku di mana -mana di dalam pokok komponen dan boleh berlaku beberapa kali seperti yang diperlukan sehingga pokok sudah siap. Apabila komponen tergantung, React enggan membuat kemas kini negeri yang digantung sehingga semua kebergantungan yang belum selesai berpuas hati.

Jadi, apa yang berlaku apabila komponen digantung? React akan mencari pokok dan mencari yang pertama<suspense></suspense> komponen dan menjadikan kandungan sandarannya. Saya akan memberikan banyak contoh, tetapi buat masa ini, sila tahu bahawa anda boleh memberikan yang berikut:

<suspense fallback="{<Loading"></suspense> }>

...... jika<suspense></suspense> Mana -mana komponen kanak -kanak hang akan diberikan<loading></loading> Komponen.

Tetapi apa yang berlaku jika kita sudah mempunyai UI yang sah, konsisten dan pengguna memuat data baru, menyebabkan komponen digantung? Ini akan menyebabkan keseluruhan UI yang sedia ada untuk membantah dan memaparkan kandungan sandaran. Ini masih konsisten, tetapi ia bukan pengalaman pengguna yang baik. Kami lebih suka UI lama tinggal di skrin apabila data baru dimuatkan.

Untuk menyokong ini, React menyediakan API kedua, useTransition , yang secara berkesan membuat perubahan keadaan berlaku dalam ingatan . Dalam erti kata lain, ia membolehkan anda menetapkan keadaan dalam ingatan sambil mengekalkan UI sedia ada di skrin; React secara harfiah mengekalkan salinan kedua pokok komponen dalam ingatan dan menetapkan keadaan pada pokok itu . Komponen boleh digantung, tetapi hanya menggantung dalam ingatan, jadi UI anda yang sedia ada akan terus muncul di skrin. Apabila perubahan keadaan selesai dan semua yang belum selesai diselesaikan, perubahan keadaan dalam memori diberikan ke skrin. Jelas sekali anda ingin memberi maklum balas kepada pengguna dalam proses itu, jadi useTransition memberikan nilai boolean pending yang boleh anda gunakan untuk memaparkan beberapa jenis pemberitahuan "load" inline sambil menyelesaikan sementara dalam ingatan.

Apabila anda menganggapnya, anda mungkin tidak mahu memaparkan UI sedia ada selama -lamanya apabila beban digantung. Sekiranya pengguna cuba melakukan sesuatu dan masa yang lama telah berlalu sebelum selesai, anda mungkin harus mempertimbangkan bahawa UI yang ada sudah lapuk dan tidak sah. Pada ketika ini, anda mungkin mahu pokok komponen anda digantung dan dipaparkan<suspense></suspense> Kandungan kutu semula.

Untuk mencapai matlamat ini, useTransition mengambil nilai timeoutMs . Ini bermakna anda sanggup membiarkan perubahan keadaan dalam memori berjalan untuk jumlah masa sebelum tergantung.

 const component = props => {
  const [startTransition, isPending] = useTransition ({timeOutms: 3000});
  // .....
};

Di sini, startTransition adalah fungsi. Apabila anda ingin menjalankan perubahan keadaan "dalam ingatan", anda boleh memanggil startTransition dan lulus ungkapan lambda yang melakukan perubahan keadaan.

 startTransition (() => {
  penghantaran ({type: load_data_or_something, nilai: 42});
});

Anda boleh menghubungi startTransition di mana sahaja. Anda boleh menyampaikannya kepada komponen kanak -kanak, dan lain -lain. Apabila anda memanggilnya, sebarang perubahan keadaan yang anda lakukan akan berlaku dalam ingatan. Sekiranya menunggu berlaku, isPending akan menjadi benar, yang boleh anda gunakan untuk memaparkan beberapa jenis penunjuk beban sebaris.

Itu sahaja. Inilah ketegangan.

Selebihnya artikel ini akan memperkenalkan beberapa kod sebenar untuk memanfaatkan ciri -ciri ini.

Contoh: Navigasi

Untuk mengaitkan navigasi dengan ketegangan, anda akan gembira mengetahui bahawa React memberikan primitif untuk melakukan ini: React.lazy . Ia adalah fungsi yang menerima ungkapan lambda yang mengembalikan janji, yang menyelesaikan komponen React. Hasil panggilan fungsi ini akan menjadi komponen pemuatan malas anda. Kedengarannya rumit, tetapi kelihatan seperti ini:

 const settingsComponent = malas (() => import ("./ modul/tetapan/tetapan")));

SettingsComponent kini merupakan komponen React yang apabila diberikan (tetapi tidak sebelum ini), akan memanggil fungsi yang kami lalui di mana akan memanggil import() dan memuatkan modul JavaScript yang terletak di ./modules/settings/settings .

Bahagian utama ialah: sementara import() sedang berjalan, komponen yang menjadikan SettingsComponent akan digantung. Nampaknya kita mempunyai semua komponen di tangan, jadi mari kita meletakkannya bersama-sama dan membina beberapa navigasi berasaskan ketegangan.

Program Pembantu Navigasi

Tetapi pertama, untuk menyediakan konteks, saya akan memperkenalkan secara ringkas bagaimana keadaan navigasi diuruskan dalam permohonan ini supaya kod suspense lebih masuk akal.

Saya akan menggunakan aplikasi senarai buku saya. Ia hanya projek peribadi diri saya, yang saya gunakan terutamanya untuk bereksperimen dengan teknologi web canggih. Ia ditulis oleh saya sahaja, jadi harapkan sebahagian daripadanya menjadi sedikit kasar (terutama reka bentuk).

Aplikasi ini kecil dan pengguna boleh melayari kira -kira lapan modul yang berbeza tanpa sebarang navigasi yang lebih mendalam. Sebarang status carian yang boleh digunakan oleh modul disimpan dalam rentetan pertanyaan URL. Dengan ini, ada cara untuk mengekstrak nama modul semasa dan status carian dari URL. Kod ini menggunakan pakej query-string dan history pertanyaan NPM, yang kelihatan seperti ini (beberapa butiran telah dikeluarkan untuk kesederhanaan, seperti pengesahan).

 import createhistory dari "Sejarah/CreateBrowserhistory";
Import querystring dari "pertanyaan-string";
Eksport Const History = CreateHistory ();
fungsi eksport getCurrenturlState () {
  biarkan lokasi = history.location;
  biarkan parsed = queryString.parse (location.search);
  kembali {
    Nama laluan: location.pathname,
    SearchState: dihuraikan
  };
}
fungsi eksport getCurrentModulefromurl () {
  biarkan lokasi = history.location;
  kembali location.pathName.Replace (/\ // g, "") .tolowerCase ();
}

Saya mempunyai reducer appSettings yang memegang modul semasa dan nilai searchState aplikasi dan menggunakan kaedah ini untuk disegerakkan dengan URL apabila diperlukan.

Komponen navigasi berasaskan ketegangan

Mari kita mulakan dengan beberapa kerja ketegangan. Pertama, mari buat komponen malas yang dimuatkan untuk modul kami.

 const activateComponent = malas (() => import ("./ modul/aktifkan/aktifkan"));
const AuthenticateComponent = malas (() => import ("./ Modul/mengesahkan/mengesahkan"));
const booksComponent = malas (() => import ("./ modul/buku/buku"));
const homeComponent = malas (() => import ("./ modul/rumah/rumah"));
const scancomponent = malas (() => import ("./ modul/imbasan/imbasan"));
const subjekSomponent = malas (() => import ("./ modul/subjek/subjek"));
const settingsComponent = malas (() => import ("./ modul/tetapan/tetapan")));
const admincomponent = malas (() => import ("./ modul/admin/admin"));

Sekarang kita memerlukan cara untuk memilih komponen yang betul berdasarkan modul semasa. Sekiranya kita menggunakan penghala reaksi, kita akan mempunyai beberapa yang bagus<route></route> Komponen. Oleh kerana kita melakukan ini secara manual, pernyataan switch akan berfungsi.

 Eksport const getModuleComponent = moduleToload => {
  jika (moduleToload == null) {
    kembali null;
  }
  suis (moduleToload.tolowerCase ()) {
    Kes "Aktifkan":
      pulangan ActivateComponent;
    kes "mengesahkan":
      pulangan Authenticatecomponent;
    Kes "Buku":
      kembali BooksComponent;
    kes "rumah":
      kembali homecomponent;
    kes "imbasan":
      pulangan scancomponent;
    Kes "Subjek":
      kembali subjek komponen;
    Kes "Tetapan":
      Kembali Tetapan Komponen;
    kes "admin":
      kembali Admincomponent;
  }

  kembali homecomponent;
};

Menyatukan semuanya

Selepas semua persediaan yang membosankan, mari kita lihat bagaimana root keseluruhan aplikasi. Terdapat banyak kod di sini, tetapi saya berjanji bahawa agak sedikit garis ini berkaitan dengan ketegangan dan saya akan meliputi semuanya.

 const app = () => {
  const [startTransitionNewModule, isNewModulePending] = useTransition ({
    Timeoutms: 3000
  });
  const [startTransitionModuleUpdate, moduleupdatePending] = useTransition ({{
    Timeoutms: 3000
  });
  biarkan appStatePacket = useAppState ();
  Biarkan [AppState, _, Dispatch] = AppStatePacket;
  biarkan komponen = getModuleComponent (appstate.module);
  useeffect (() => {
    startTransitionNewModule (() => {
      penghantaran ({type: url_sync});
    });
  }, []);
  useeffect (() => {
    kembali sejarah.listen (lokasi => {
      jika (appstate.module! = getCurrentModuleFromurl ()) {
        startTransitionNewModule (() => {
          penghantaran ({type: url_sync});
        });
      } else {
        startTransitionModuleUpdate (() => {
          penghantaran ({type: url_sync});
        });
      }
    });
  }, [appstate.module]);
  Kembali (
    <appcontext.provider value="{appStatePacket}">
      <moduleupdatecontext.provider value="{moduleUpdatePending}">
        <div>
          <mainnavigationbar></mainnavigationbar>
          {isNewModulePending?<loading></loading> : null}
          <suspense fallback="{<LongLoading"></suspense> }>
            <div style="{{" flex: overflowy:>
              {Komponen?<component updating="{moduleUpdatePending}"></component> : null}
            </div>
          
        </div>
      </moduleupdatecontext.provider>
    </appcontext.provider>
  );
};

Pertama, kami membuat dua panggilan yang berbeza untuk useTransition . Kami menggunakan satu untuk laluan ke modul baru dan yang lain untuk mengemas kini status carian modul semasa. Mengapa ada perbezaan? Nah, modul mungkin ingin memaparkan penunjuk beban sebaris apabila status carian modul sedang dikemas kini. Status kemas kini disimpan oleh pembolehubah moduleUpdatePending , anda akan melihat bahawa saya meletakkannya dalam konteks supaya modul aktif dapat diambil dan digunakan seperti yang diperlukan:

<div>
  <mainnavigationbar></mainnavigationbar>
  {isNewModulePending?<loading></loading> : null}
  <suspense fallback="{<LongLoading"></suspense> }>
    <div style="{{" flex: overflowy:>
      {Komponen?<component updating="{moduleUpdatePending}"></component> : null}
    </div>
  
</div>

appStatePacket adalah hasil daripada (tetapi tidak ditunjukkan) pengurangan keadaan aplikasi yang dibincangkan di atas. Ia mengandungi pelbagai serpihan keadaan aplikasi yang jarang diubah (tema warna, keadaan luar talian, modul semasa, dan lain -lain).

 biarkan appStatePacket = useAppState ();

Kemudian, saya akan mendapat komponen aktif berdasarkan nama modul semasa. Pada mulanya ini akan menjadi batal.

 biarkan komponen = getModuleComponent (appstate.module);

Panggilan pertama ke useEffect akan memberitahu kami bahawa reducer appSettings disegerakkan dengan URL pada permulaan.

 useeffect (() => {
  startTransitionNewModule (() => {
    penghantaran ({type: url_sync});
  });
}, []);

Oleh kerana ini adalah modul awal yang aplikasi web menavigasi, saya membungkusnya dalam startTransitionNewModule untuk menunjukkan bahawa modul baru sedang dimuatkan. Walaupun ia mungkin menggoda untuk menetapkan nama modul awal reducer sebagai keadaan awalnya, ini menghalang kita daripada memanggil Callback startTransitionNewModule , yang bermaksud bahawa sempadan ketegangan kita akan menjadikan kandungan sandaran segera, bukan selepas tamat masa.

Langganan sejarah ditetapkan untuk panggilan seterusnya untuk useEffect . Bagaimanapun, apabila URL berubah, kami akan memberitahu tetapan permohonan kami untuk disegerakkan dengan URL. Satu -satunya perbezaan ialah startTransition panggilan yang sama dibalut.

 useeffect (() => {
  kembali sejarah.listen (lokasi => {
    jika (appstate.module! = getCurrentModuleFromurl ()) {
      startTransitionNewModule (() => {
        penghantaran ({type: url_sync});
      });
    } else {
      startTransitionModuleUpdate (() => {
        penghantaran ({type: url_sync});
      });
    }
  });
}, [appstate.module]);

Jika kita melayari modul baru, kita akan memanggil startTransitionNewModule . Sekiranya kita memuatkan komponen yang belum dimuatkan, React.lazy . Oleh kerana cara kerja useTransition , skrin semasa akan terus dipaparkan selama tiga saat. Sekiranya masa itu melebihi dan komponen masih belum siap, UI kami akan digantung dan kandungan sandaran akan diberikan, yang akan dipaparkan<longloading></longloading> Komponen:

 {isNewModulePending?<loading></loading> : null}
<suspense fallback="{<LongLoading"></suspense> }>
  <div style="{{" flex: overflowy:>
    {Komponen?<component updating="{moduleUpdatePending}"></component> : null}
  </div>

Jika kita tidak mengubah modul, kita akan memanggil startTransitionModuleUpdate :

 startTransitionModuleUpdate (() => {
  penghantaran ({type: url_sync});
});

Jika kemas kini menyebabkan hang, penunjuk hang yang akan kami letakkan dalam konteks akan dipecat. Komponen aktif dapat mengesan ini dan memaparkan mana -mana penunjuk beban sebaris yang diinginkannya. Seperti dahulu, jika masa hang melebihi tiga saat, sempadan ketegangan yang sama akan dicetuskan ... kecuali, seperti yang akan kita lihat kemudian, sempadan ketegangan wujud di bahagian bawah pokok.

Satu perkara penting yang perlu diperhatikan ialah masa tamat tiga saat ini bukan sahaja untuk memuatkan komponen, tetapi juga untuk paparan siap. Sekiranya komponen dimuatkan dalam masa dua saat dan digantung semasa memori (kerana kami berada di dalam panggilan startTransition ), useTransition akan terus menunggu sehingga satu saat sebelum menggantung lagi.

Semasa menulis siaran ini, saya menggunakan mod rangkaian perlahan Chrome untuk membantu memaksa pemuatan untuk melambatkan untuk menguji sempadan ketegangan saya. Tetapan terletak di tab Rangkaian Alat Pembangunan Chrome.

Mari buka aplikasi kami ke modul Tetapan. Ini akan dipanggil:

 penghantaran ({type: url_sync});

Reducer appSettings kami akan disegerakkan dengan URL dan kemudian menetapkan modul ke "Tetapan". Ini akan berlaku di dalam startTransitionNewModule supaya ia akan digantung apabila komponen yang dimuatkan malas cuba membuatnya. Oleh kerana kita berada di dalam startTransitionNewModule , isNewModulePending akan beralih kepada benar dan akan diberikan<loading></loading> Komponen.

Jadi, apa yang berlaku apabila kita melayari tempat baru? Pada dasarnya sama seperti sebelumnya, kecuali panggilan ini:

 penghantaran ({type: url_sync});

... akan dari contoh kedua useEffect . Mari kita melayari modul buku dan lihat apa yang berlaku. Pertama, Spinner Inline menunjukkan seperti yang diharapkan:

(Tangkapan skrin harus dimasukkan di sini)

Cari dan kemas kini

Mari tinggal di modul buku dan kemas kini rentetan pertanyaan URL untuk memulakan carian baru. Ingatlah bahawa kami mengesan modul yang sama dalam panggilan useEffect kedua dan menggunakan panggilan useTransition khusus untuk ini. Dari sana, kami meletakkan penunjuk penggantung dalam konteks supaya mana -mana modul aktif yang boleh diambil dan digunakan untuk kami.

Mari kita lihat beberapa kod yang sebenarnya menggunakannya. Tidak ada kod yang berkaitan dengan ketegangan di sini. Saya mendapat nilai dari konteks dan jika benar, menjadikan pemutar sebaris di atas hasil yang ada. Ingatlah ini berlaku apabila panggilan useTransition telah bermula dan permohonan itu digantung dalam ingatan . Pada masa ini kami akan terus memaparkan UI yang sedia ada, tetapi dengan penunjuk beban ini.

 constResults = ({Books, uiview}) => {
  const isUpdating = useContext (ModuleUpDateContext);
  Kembali (
    <div>
      {! books.length? (
        <div classname="alert alert-warning" style="{{" margintop: marginright:>
          Tiada buku yang dijumpai
        </div>
      ): null}
      {isupdating?<loading></loading> : null}
      {uiview.isgridview? (
        <gridview books="{books}"></gridview>
      ): uiview.isbasiclist? (
        <basiclistview books="{books}"></basiclistview>
      ): uiview.iscoverslist? (
        <coversview books="{books}"></coversview>
      ): null}
    </div>
  );
};

Mari kita buat istilah carian dan lihat apa yang berlaku. Pertama, paparan spinner sebaris.

Kemudian, jika useTransition tamat, kami akan mendapat kandungan sandaran sempadan ketegangan. Modul Buku mentakrifkan sempadan ketegangannya sendiri untuk memberikan penunjuk pemuatan yang lebih baik, seperti yang ditunjukkan di bawah:

(Tangkapan skrin harus dimasukkan di sini)

Ini adalah perkara utama. Cuba jangan memaparkan mana -mana pemutar dan "memuatkan" mesej apabila membuat penangguhan sempadan. Ini masuk akal untuk navigasi teratas kami kerana tidak ada lagi yang perlu dilakukan. Walau bagaimanapun, apabila anda berada di bahagian tertentu aplikasi, cuba buat kandungan sandaran semula menggunakan banyak komponen yang sama dan memaparkan beberapa jenis penunjuk beban di mana data itu - tetapi segala -galanya dilumpuhkan.

Berikut adalah komponen modul buku saya yang relevan seperti:

 const renderModule = () => {
  const uiview = UseBookSearchUiview ();
  const [lastBookResults, setLastBookResults] = USESTATE ({
    TotalPages: 0,
    KeputusanCount: 0
  });
  Kembali (
    <div classname="standard-module-container margin-bottom-lg">
      <suspense fallback="{<Fallback" uiview="{uiView}"></suspense> }>
        <maincontent setlastbookresults="{setLastBookResults}" uiview="{uiView}"></maincontent>
      
    </div>
  );
};
const fallback = ({uiview, totalPages, resultscount}) => {
  Kembali (
    <div>
      <booksmenubardisabled resultscount="{resultsCount}" totalpages="{totalPages}"></booksmenubardisabled>
      {uiview.isgridview? (
        <gridviewshell></gridviewshell>
      ): (
        <h1>
          Buku dimuatkan<i classname="fas fa-cog fa-spin"></i>
        </h1>
      )}
    </div>
  );
};

Nota cepat mengenai konsistensi

Sebelum kita meneruskan, saya ingin menunjukkan satu perkara dalam tangkapan skrin sebelumnya. Lihat pemutar sebaris yang muncul apabila carian digantung, kemudian lihat skrin apabila carian digantung, dan kemudian lihat hasil yang lengkap:

(Tangkapan skrin harus dimasukkan di sini)

Nota Jika terdapat tag "c" di sebelah kanan anak tetingkap carian, dan adakah pilihan untuk mengeluarkannya dari pertanyaan carian? Atau, ambil perhatian bahawa tag hanya pada dua tangkapan skrin terakhir? Saat URL dikemas kini, status aplikasi yang mengawal tag itu memang dikemas kini; Walau bagaimanapun, status tidak akan dipaparkan pada mulanya. Pada mulanya, kemas kini status digantung dalam ingatan (kerana kami menggunakan useTransition ) dan UI sebelumnya terus memaparkan.

Kemudian kandungan disokong. Kandungan sandaran menjadikan versi kurang upaya bar carian yang sama, yang menunjukkan status carian semasa (berdasarkan pemilihan). Kami kini telah mengeluarkan UI sebelumnya (kerana sekarang sudah lama dan basi) dan sedang menunggu untuk melumpuhkan carian yang dipaparkan di bar menu.

Ini adalah jenis ketegangan konsisten yang memberikan anda percuma.

Anda boleh meluangkan masa untuk membuat keadaan aplikasi yang indah, dan React melakukan tugas menyimpulkan sama ada perkara -perkara yang siap tanpa anda harus berurusan dengan janji.

Sempadan ketegangan bersarang

Katakan navigasi teratas kami mengambil sedikit masa untuk memuatkan komponen buku kami sejauh mana pemutar kami "masih memuatkan, maaf" dari sempadan ketegangan. Dari sana, komponen buku dimuatkan, dan sempadan ketegangan baru dalam komponen buku diberikan. Tetapi, sebagai rendering berterusan, kebakaran pertanyaan carian buku kami dan hang. Apa yang berlaku? Adakah sempadan ketegangan teratas akan terus dipaparkan sehingga semuanya siap, atau akan sempadan ketegangan peringkat rendah dalam buku itu mengambil alih?

Jawapannya adalah yang terakhir. Apabila sempadan ketegangan baru diberikan pada kedudukan yang lebih rendah di dalam pokok itu, kandungan sandaran mereka menggantikan kandungan sandaran dari mana -mana kandungan kembali ketegangan sebelumnya yang telah dipaparkan. Pada masa ini terdapat API yang tidak stabil yang boleh mengatasi ciri ini, tetapi jika anda membuat kandungan sandaran dengan baik, ini mungkin tingkah laku yang anda inginkan. Anda tidak mahu "masih memuatkan, maaf" untuk terus memaparkan. Sebaliknya, sebaik sahaja komponen buku sudah siap, anda pasti ingin memaparkan cangkang dengan mesej menunggu yang lebih disasarkan.

Sekarang bagaimana jika modul buku kami dimuatkan dan mula membuat rendering apabila pemutar startTransition masih dipaparkan dan kemudian digantung? Dalam erti kata lain, katakan tamat masa startTransition kami adalah tiga saat, komponen buku membuat, sempadan ketegangan bersarang berada di dalam pokok komponen selepas satu saat, dan pertanyaan carian digantung. Adakah baki dua saat akan berlalu atau akan sandaran akan dipaparkan dengan segera sebelum sempadan ketegangan bersarang baru menjadikan kandungan sandaran? Jawapannya mungkin mengejutkan, secara lalai, kandungan sandaran ketegangan baru akan dipaparkan dengan segera. Ini kerana lebih baik memaparkan UI yang sah baru secepat mungkin supaya pengguna dapat melihat perkara -perkara yang berlaku dan bergerak.

Cara Mengintegrasikan Data

Navigasi adalah baik, tetapi bagaimana pemuatan data sesuai dengan semuanya?

Ia menggabungkannya dengan telus. Pemuatan data mencetuskan hang seperti yang dilakukan dengan navigasi React.lazy , dan ia cangkuk dengan semua useTransition dan sempadan yang sama. Itulah sebabnya ketegangan sangat menakjubkan: semua kebergantungan tidak segerak berfungsi dengan lancar dalam sistem yang sama. Sebelum ketegangan, secara manual menguruskan pelbagai permintaan tidak segerak ini untuk memastikan konsistensi adalah mimpi ngeri, yang tepatnya mengapa tidak ada yang melakukannya. Aplikasi web terkenal dengan pemintal yang tidak dapat diprediksi, menghasilkan UI yang tidak konsisten yang hanya sebahagiannya selesai.

Ok, tapi bagaimana kita sebenarnya mengaitkan beban data dengannya? Memuatkan data dalam ketegangan adalah lebih kompleks dan mudah.

Izinkan saya menerangkan.

Jika anda sedang menunggu data, anda akan membuang janji dalam komponen yang membaca (atau cuba membaca) data. Janji harus konsisten berdasarkan permintaan data. Oleh itu, empat permintaan pendua untuk pertanyaan carian "C" yang sama harus membuang janji yang sama dan sama. Ini bermakna beberapa jenis lapisan cache untuk menguruskan semua ini. Anda mungkin tidak akan menulis ini sendiri. Sebaliknya, anda hanya mahu dan menunggu pangkalan data yang anda gunakan untuk mengemas kini dirinya untuk menyokong ketegangan.

Kerja ini telah dilakukan di perpustakaan mikro-graphQL saya. Anda akan menggunakan hook useSuspenseQuery dan bukannya cangkuk useQuery , yang mempunyai API yang sama, tetapi akan membuang janji yang konsisten apabila anda menunggu data.

Tunggu, bagaimana dengan preloading? !

Baca perkara lain mengenai ketegangan, bercakap tentang air terjun, rendering, prameloading, dan lain -lain, adakah otak anda sudah keliru? Jangan risau. Itulah maksudnya.

Katakan anda melambatkan memuatkan komponen buku, yang kemudiannya meminta beberapa data, yang akan mengakibatkan ketegangan baru. Permintaan rangkaian komponen dan permintaan rangkaian data akan berlaku satu demi satu dengan cara air terjun.

Tetapi bahagian utama adalah: apabila anda mula memuatkan komponen, keadaan aplikasi yang menyebabkan sebarang pertanyaan awal untuk dijalankan sudah tersedia (dalam hal ini URL). Jadi mengapa tidak "memulakan" pertanyaan dengan segera apabila anda tahu anda memerlukannya? Sebaik sahaja anda melayari /buku, mengapa tidak memulakan pertanyaan carian semasa dengan segera pada masa itu supaya ia sedang berjalan apabila komponen dimuatkan?

Modul mikro-graphql-react mempunyai kaedah preload, dan saya cadangkan anda menggunakannya. Data preloading adalah pengoptimuman prestasi yang baik, tetapi ia tidak ada kaitan dengan ketegangan. Aplikasi React Classic boleh (dan sepatutnya) data pram naik dengan segera apabila mereka tahu mereka memerlukannya. Aplikasi VUE harus pramuat data dengan segera apabila mereka tahu mereka memerlukannya. Permohonan Svelte harus ... Anda mendapatkannya.

Data yang dimuatkan adalah ortogonal untuk ketegangan, yang boleh anda lakukan dengan rangka kerja. Ini juga sesuatu yang harus kita lakukan, walaupun orang lain tidak melakukannya.

Tetapi serius, bagaimana anda pramuat?

Terpulang kepada anda. Sekurang -kurangnya, logik untuk menjalankan carian semasa benar -benar perlu dipisahkan sepenuhnya ke dalam modul bebas sendiri. Anda harus memastikan fungsi preload ini berada dalam fail yang berasingan. Jangan bergantung pada webpack untuk jitter seperti pokok; Anda mungkin menghadapi kesedihan yang lengkap apabila anda menyemak pakej anda.

Anda mempunyai kaedah preload() dalam pakejnya sendiri, jadi panggilnya. Panggilnya apabila anda tahu anda mahu menavigasi ke modul. Saya menganggap Router React mempunyai beberapa API yang boleh menjalankan kod apabila navigasi berubah. Untuk kod penghalaan asli di atas, saya memanggil kaedah dalam penukaran laluan sebelumnya. Saya meninggalkannya untuk keringkasan, tetapi entri buku sebenarnya kelihatan seperti ini:

 suis (moduleToload.tolowerCase ()) {
  Kes "Aktifkan":
    pulangan ActivateComponent;
  kes "mengesahkan":
    pulangan Authenticatecomponent;
  Kes "Buku":
    // preload! ! !
    BookPreload ();
    kembali BooksComponent;

Itu sahaja. Berikut adalah demonstrasi langsung yang boleh anda cuba:

(Pautan harus dimasukkan di sini)

Untuk mengubah suai nilai tamat suspense (lalai adalah 3000 milisaat), menavigasi ke tetapan dan melihat tab lain. Selepas pengubahsuaian, pastikan anda menyegarkan semula halaman.

Meringkaskan

Saya sangat teruja dengan apa -apa dalam ekosistem pembangunan web seperti yang saya lakukan dengan ketegangan. Ia adalah sistem yang sangat bercita -cita untuk menguruskan salah satu masalah yang paling sukar dalam pembangunan web: asynchronicity.

Atas ialah kandungan terperinci Bertindak balas dengan ketegangan dalam amalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!