Membandingkan React Mutative vs. React Immer

Menguruskan keadaan dalam apl React ialah bahagian penting dalam mencipta antara muka pengguna yang dinamik dan responsif. Secara tradisinya, pembangun bergantung pada kemas kini yang tidak berubah, yang menghasilkan salinan baharu negeri dengan pengubahsuaian yang diperlukan. Walaupun kaedah ini menyediakan kebolehramalan dan memudahkan penyahpepijatan, kaedah ini mungkin mempunyai penalti prestasi, terutamanya apabila berurusan dengan struktur data yang besar atau rumit.

Artikel ini merangkumi dua rangka kerja React yang popular untuk mengendalikan keadaan; Bertindak Mutatif dan Immer. Kedua-dua perpustakaan menggalakkan kebolehubahan, walaupun melalui cara yang berbeza.

Gambaran Keseluruhan React Mutative

Pelaksanaan Mutative sangat setanding dengan Immer, walaupun lebih mantap. Mutatif mengendalikan data dengan lebih cekap daripada Immer dan pengurang asli. Menurut pasukan Mutatif, penyelesaian pengurusan negeri ini menjadikan kemas kini tidak berubah lebih mudah. Ia adalah kira-kira dua hingga enam kali lebih pantas daripada pengurang buatan tangan purata serta lebih daripada 10 kali lebih pantas daripada Immer.
Berikut ialah beberapa faedah Mutative.js:

• Keringkas: Kod menjadi lebih mudah dibaca dan lebih mudah untuk ditulis.
• Prestasi: Ini boleh menjadi lebih pantas daripada kemas kini tidak berubah manual, terutamanya untuk struktur data yang besar.
• Pengurangan Ralat: Membantu mengelakkan mutasi objek keadaan secara tidak sengaja.

Sebagai contoh, katakan terdapat objek keadaan yang mengandungi senarai. Kami berhasrat untuk menandakan item terakhir dalam senarai sebagai selesai dan kemudian menambah item baharu:

const state = {
  list: [
    { text: 'Learn JavaScript', done: true },
    { text: 'Learn React', done: true },
    { text: 'Learn Redux', done: false },
  ],
};

Jika kami menggunakan kemas kini data tidak berubah biasa, kami boleh menulisnya seperti berikut:

const nextState = {
  ...state,
  list: [
    ...state.list.slice(0, 2),
    {
      ...state.list[2],
      done: true,
    },
    { text: 'Learn Mutative', done: true },
  ],
};

Tetapi semasa menggunakan Mutatif, kita boleh menulisnya dengan cara ini:

import { create } from 'mutative';

const nextState = create(state, (draft) => {
  draft.list[2].done = true;
  draft.list.push({ text: 'Learn Mutative', done: true });
});

Ini ialah penggunaan asas Mutatif, yang membolehkan kami melaksanakan kemas kini tidak berubah dengan lebih mudah.

Gambaran Keseluruhan React Immer

Immer, yang bermaksud sentiasa dalam bahasa Jerman, ialah pakej kecil yang menjadikan bekerja dengan keadaan tidak berubah menjadi lebih mudah. Pemenang Anugerah Sumber Terbuka JavaScript 2019 untuk "Sumbangan paling berkesan".

Faedah React Immer

Faedah ini cenderung untuk dicapai dengan memastikan anda sentiasa membuat salinan objek, tatasusunan atau peta yang diedit daripada menukar mana-mana sifatnya. Ini boleh menyukarkan penulisan kod, dan mudah untuk melanggar sekatan sedemikian secara tidak sengaja. Melalui penyelesaian isu ini, Immer akan membantu anda dalam mematuhi pendekatan data tidak berubah. Berikut ialah beberapa faedah React Immer:

• Immer akan melaporkan ralat jika ia mengesan mutasi yang tidak disengajakan.

• Immer menghapuskan keperluan untuk kod boilerplate biasa yang diperlukan semasa membuat pengubahsuaian mendalam pada objek tidak boleh ubah. Tanpa Immer, pendua objek mesti dibuat dengan tangan di semua peringkat. Biasanya, dengan melakukan sejumlah besar... operasi penyebaran. Apabila menggunakan Immer, pengubahsuaian dibuat pada objek draf, yang merekodkannya dan mencipta pendua yang sesuai tanpa menukar objek asal.

• Immer tidak memerlukan anda menguasai API atau struktur data tertentu untuk mendapat keuntungan daripada paradigma tersebut. Immer membolehkan anda mengakses struktur data JavaScript biasa serta API JavaScript boleh ubah yang terkenal, sambil kekal selamat.

  Contoh Kod

  di bawah ialah contoh mudah untuk perbandingan pantas:
  

const baseState = [
    {
        title: "Learn JavaScript",
        done: true
    },
    {
        title: "Try Immer",
        done: false
    }
]

Anggapkan kita mempunyai keadaan asas sebelumnya, dan kita perlu mengemas kini todo kedua dan menambah yang ketiga. Walau bagaimanapun, kami tidak mahu menukar keadaan asas asal dan mengelakkan pengklonan mendalam (untuk mengekalkan todo pertama).

Tanpa Immer

Tanpa Immer, mengekalkan kebolehubahan memerlukan kami menyalin setiap tahap kesan objek keadaan.

const nextState = baseState.slice() // shallow clone the array
nextState[1] = {
    // replace element 1...
    ...nextState[1], // with a shallow clone of element 1
    done: true // ...combined with the desired update
}
//Since nextState was freshly cloned, using push is safe here,
// but doing the same thing at any arbitrary time in the future would
// violate the immutability principles and introduce a bug!
nextState.push({title: "Tweet about it"})

Dengan Immer

Immer memudahkan proses ini. Kita boleh menggunakan fungsi jana, yang mengambil sebagai hujah pertama keadaan yang ingin kita mulakan, dan sebagai parameter kedua fungsi yang dipanggil resipi, yang diserahkan draf yang boleh kita gunakan pengubahsuaian mudah. Setelah resipi selesai, mutasi direkodkan dan digunakan untuk mencipta keadaan seterusnya. jana akan mengendalikan semua penyalinan yang diperlukan sambil juga melindungi data daripada perubahan tidak disengajakan pada masa hadapan dengan membekukannya.

import {produce} from "immer"

const nextState = produce(baseState, draft => {
    draft[1].done = true
    draft.push({title: "Tweet about it"})
})

Adakah anda sedang mencari Immer with React? Anda dialu-alukan untuk pergi terus ke tapak web React + Immer.

Fungsi Teras

Kedua-dua Mutatif dan Immer mencapai kemas kini tidak berubah dalam cara yang sama secara konsep, tetapi dengan perbezaan pelaksanaan utama yang mempengaruhi prestasi. Berikut ialah pecahan:

1. Draft State: Both libraries create a draft version of the original state object. This draft behaves mostly like the original state, allowing you to write updates as if you were mutating it directly.
2. Immutability Behind the Scenes: When you make changes to the draft state, these libraries aren't modifying the original object. Instead, they track the changes you make.
3. Generating a New State: Once you're done with your updates in the draft state, Mutative, and Immer use different approaches to create a new, immutable state object reflecting the changes:
4. Mutative: It leverages a high-performance algorithm to efficiently create a new data structure with the modifications from the draft. This approach prioritizes speed.
5. Immer: It employs a proxy object that intercepts mutations on the draft and uses that information to construct a completely new, immutable state object. This approach offers more flexibility but can have some performance overhead. ## Performance Comparison When it comes to raw performance, Mutative reigns supreme over Immer, especially for updates involving large data structures. Here's why:
6. Speed Demon: Benchmarks show Mutative can be a staggering 2-6 times faster than writing state updates with traditional reducers and a whopping over 10 times faster than Immer in its default settings.

• Secret Sauce: This speed advantage boils down to how each library creates the final immutable state object. Mutative employs a highly optimized algorithm that efficiently builds a new data structure reflecting the changes you made in the draft, prioritizing raw speed.

• Immer's Overhead: Immer, on the other hand, utilizes a proxy object to track mutations on the draft state. This approach offers more flexibility but comes with an overhead that can significantly slow things down, particularly when dealing with large datasets. It's like adding an extra step in the process.

• Auto-Freeze and the Tradeoff: Immer offers an optional feature called auto-freeze, which helps prevent accidental modifications to the original state. This is great for safety, but it comes at a performance cost. Disabling auto-freeze can bring Immer closer to Mutative's speed, but then you lose the safety net.

  The Ease of Use Comparison

  Both Mutative and Immer offer an intuitive way to write state updates that appear to mutate the state but ultimately result in immutable updates. However, there are some differences in syntax and potential for errors:
  Syntax Mutative: Leverages familiar syntax that resembles traditional mutations. You write code as if you're directly modifying the state object.
  Example:
  

const draft = createDraft(currentState);
draft.todos.push({ text: 'Buy milk' });
const newState = commit(draft);

Immer Syntax: Requires using specific Immer functions like produce to wrap your update logic.
Example:

const newState = produce(currentState, draft => {
  draft.todos.push({ text: 'Buy milk' });
});

Draft Escapes

Draft escapes occur when you unintentionally modify the original state object instead of the draft copy in libraries like Mutative and Immer.
Mutative: While Mutative's syntax might feel familiar, there's a higher risk of accidentally modifying the original state object (draft escapes). This can happen if you forget to use the commit function to finalize the changes and create the new state. It requires stricter discipline to ensure all modifications go through the draft.
Immer: Immer's syntax explicitly forces you to work within the draft state using functions like produce. This reduces the chance of accidentally modifying the original state, making it inherently safer.

Conclusion

Ultimately, the best choice depends on your specific project requirements and team preferences. Consider trying both libraries on a small project to see which one feels more comfortable for your developers.

Atas ialah kandungan terperinci Membandingkan React Mutative vs. React Immer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!