Masalah dengan penggunaan cangkuk berorientasikan masa sebelumnya dan serupa

Theo telah membuat video minggu ini tentang gelagat tidak intuitif cangkuk React, meneroka terutamanya idea cangkuk yang dipanggil usePrevious, untuk mengekalkan versi nilai paparan semula terakhir, sebelum semasa satu. Satu cara untuk melakukan logik dengan keadaan lama dan baharu.

Jika anda ingin melihat idea bagaimana untuk melaksanakannya, sila semak video, dalam siaran ini ideanya adalah untuk meneroka aspek konsep untuk memiliki cangkuk seperti usePrevious.

Ungkapan reaktif

Seperti yang anda lihat, kami tidak mempunyai cangkuk primitif seperti ini dalam React. Sebelum cangkuk, dalam era berasaskan kelas, kami mempunyai kaedah kitaran hayat yang dipanggil componentDidUpdate di mana kami mendapat semua keadaan dan prop sebelumnya sebagai parameter, mengapa mereka tidak mengekalkan tingkah laku ini dengan cangkuk?

Ia boleh menjadi sedikit berulang jika anda membaca siri siaran ini, tetapi kita perlu bercakap tentang anjakan paradigma, dalam kes ini.

Dengan kelas, apabila sesetengah keadaan mengemas kini, anda tidak mempunyai cara automatik untuk mengira semula nilai terbitan. Jika anda menggunakan beberapa prop dan keadaan tertentu untuk mengira beberapa nilai baharu, anda perlu mengesahkan sendiri jika sesetengah daripadanya telah berubah.

Dengan cara ini, penyelesaiannya ialah mempunyai panggilan balik yang dipanggil dalam semua kemas kini dan menghantar kepada pengguna nilai sebelumnya. Kod apl menyemak perbezaan dan mengemas kini keadaan yang dikira dengan hasil baharu. Ini ialah keterusterangan komponen berasaskan kelas, anda mempunyai kawalan sepenuhnya terhadap aliran data dan perlu mengawal pengiraan secara manual.

Di sini kita sampai kepada ungkapan kereaktifan.

Daripada perlu menyemak dan melakukan perubahan, anda menulis ungkapan, formula pengiraan, semacam. Pengiraan ini perlu dilaksanakan dengan versi keadaan semasa, tanpa akses kepada yang sebelumnya.

Bayangkan formula:

a = b + c


b = 10
c = 20


a = 10 + 20
a = 30

Jika saya menggunakan ungkapan ini 1 juta kali, melepasi b sebagai 10 dan c sebagai 20, saya akan mendapat hasil yang sama. Ini adalah pengiraan tulen. React melaksanakan prinsip yang sama. Semua pengiraan terbitan hendaklah tulen.

Tetapi kenapa ia penting?

Tindak balas kerja dalam pemaparan semula. Setiap kitaran menjana perihalan UI dan berdasarkan perbezaan antara yang semasa dan yang seterusnya, ia melakukan perubahan pada DOM. Setiap paparan dipisahkan sepenuhnya daripada sebelumnya atau seterusnya.

UI = fn(state)

Jadi untuk setiap versi negeri yang berbeza, kami mendapat versi UI yang berbeza. Ini menjadi agak mengelirukan jika kita menambah nilai sebelumnya di sini. Kerana sekarang ia bukan hanya bergantung pada negeri, tetapi juga pada Negeri sebelumnya. Daripada mempunyai satu sumber, satu ungkapan dan satu hasil, saya boleh mempunyai berbilang sumber, mungkin ungkapan yang lebih kompleks untuk mengendalikan sumber ini dan UI yang tidak konsisten dan tidak dapat diramalkan akibatnya.

Setiap paparan akan berkelakuan berbeza berdasarkan keadaan sebelumnya. Dan kerana beberapa kemungkinan pelaksanaan usePrevious bergantung pada pesanan masa dalam React, ini menjadi lebih berbahaya.

Dengan ciri serentak, React boleh berhenti tanpa memberi amaran kepada pemaparan, untuk mengutamakan tindakan lain. Bergantung pada useEffect dan ref boleh membuatkan anda menyimpan versi lapuk bagi pemaparan "sebelumnya" malah yang sebenar sebelumnya. Lebih banyak kekacauan untuk difikirkan.

Menghafal

Fikirkan dalam ungkapan seperti ini

a = b + c


b = 10
c = 20


a = 10 + 20
a = 30

Satu bahagian itu mempunyai keutamaan dan perlu dikira sebelum ini, mari kita fikirkan dengan kod javascript:

UI = fn(state)

Jadi sekarang kita mempunyai dua ungkapan yang dipisahkan yang boleh dikira secara berasingan dan benar-benar tulen. Tetapi jika nilai b banyak berubah dan pengiraan untuk cdResult mahal, bagaimana kita boleh menyelesaikannya? Menghafal!

a = b + (c - d)

Kini cdResult hanya akan dikira semula jika c atau d berubah.

Tetapi di atas dalam teks saya berkata tiada nilai sebelumnya, tetapi bagaimanakah pengiraan satu render boleh digunakan dalam yang seterusnya? Ini tidak memecahkan kemurnian pengiraan?

Sebenarnya, tidak. Contohnya:

const cdResult = c - d;
const a = b + cdResult;

Bayangkan kita berada dalam nombor render 1. C mempunyai nilai 30 dan d mempunyai nilai 20, jadi hasilnya ialah 10. Tetapi semasa saya menghafalnya, React akan menjejaki kebergantungan yang saya tambahkan pada tatasusunan. Jika sesetengah daripada mereka berubah, ia akan dikira semula.

const cdResult = React.useMemo(() => c - d, [c, d]);
const a = b + cdResult;

Tetapi mereka tidak berubah. Jika saya memanggil ungkapan ini sekali lagi, dengan c sebagai 30 dan d sebagai 20, saya akan mendapat 10 yang sama sebagai hasilnya. Walaupun saya berada dalam nombor pemaparan 2 dan pembolehubah lain telah berubah, kebergantungan yang saya gunakan dalam pengiraan ini tidak berubah.

Saya boleh mengiranya sekali lagi dalam setiap pemaparan, ini ialah gelagat lalai React, tetapi saya boleh memilih untuk melangkau pengiraan semula yang tidak perlu yang akan mengembalikan nilai yang sama, jadi saya menyimpannya. Kami mengekalkan kesucian dan kami mengekalkan pemisahan antara pemaparan

Negeri sebelumnya

Tetapi terdapat tempat yang baik untuk melakukan logik dengan keadaan sebelumnya, tindakan pengguna. Sudah tentu, apabila panggilan balik dipanggil, itu akan menjadi keadaan semasa. Tetapi jika anda mempunyai beberapa keadaan yang perlu diubah berdasarkan beberapa logik, itulah tempatnya.

Sudah tentu ia boleh mempunyai kes yang sangat spesifik di mana mungkin anda memerlukan cangkuk seperti usePrevious, tetapi ambil perhatian tentang ketidakkonsistenan yang boleh menyebabkannya, dan cuba tambah jaminan untuk mengelakkan pepijat pada aplikasi.

Dan yang lebih penting, jika boleh, elakkan.

Atas ialah kandungan terperinci Masalah dengan penggunaan cangkuk berorientasikan masa sebelumnya dan serupa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!