One place for hosting & domains

      Memahami

      Memahami Aksi Redux Asinkron dengan Redux Thunk


      Pengantar

      Secara asali, aksi Redux dikirimkan secara sinkron, yang menjadi masalah bagi aplikasi nontrivial yang perlu berkomunikasi dengan API eksternal atau melakukan efek samping. Redux juga memungkinkan pengiriman middleware yang berada di antara aksi dan aksi mencapai reducer.

      Ada dua pustaka middleware yang sangat populer yang memungkinkan efek samping dan akses asinkron: Redux Thunk dan Redux Saga. Dalam artikel ini, Anda akan mendalami Redux Thunk.

      Thunk adalah konsep pemrograman yang menggunakan fungsi untuk menunda evaluasi/kalkulasi suatu operasi.

      Redux Thunk adalah middleware yang memungkinkan Anda memanggil pembuat aksi yang mengembalikan fungsi sebagai ganti objek aksi. Fungsi itu menerima metode pengiriman penyimpanan, yang kemudian digunakan untuk mengirim aksi sinkron di dalam isi fungsi setelah operasi asinkron selesai.

      Dalam artikel ini, Anda akan mempelajari cara menambahkan Redux Thunk dan membuatnya cocok dengan aplikasi Todo hipotetis.

      Prasyarat

      Artikel ini beranggapan Anda telah memiliki sejumlah pengetahuan dasar tentang React dan Redux. Anda dapat merujuk artikel ini jika sudah mulai menggunakan Redux.

      Tutorial ini membangun dari aplikasi Todo hipotetis yang melacak berbagai tugas yang perlu dilakukan dan yang telah selesai. Kita dapat menganggap bahwa create-react-app telah digunakan untuk membuat aplikasi React baru, serta redux, react-redux, dan axios telah terinstal.

      Detail lebih akurat tentang cara membangun aplikasi Todo dari awal tidak dijelaskan di sini. Artikel ini disajikan sebagai pengaturan konseptual untuk menyoroti Redux Thunk.

      Menambahkan redux-thunk

      Pertama, gunakan terminal untuk menavigasi ke direktori proyek dan instal paket redux-thunk di proyek Anda:

      • npm install redux-thunk@2.3.0

      Catatan: Kode Redux Thunk hanya 14 baris. Lihatlah sumbernya di sini untuk mempelajari cara kerja middleware Redux di balik layar.

      Sekarang, terapkan middleware saat membuat penyimpanan aplikasi menggunakan applyMiddleware Redux. Dengan anggapan aplikasi React berisi redux dan react-redux, berkas index.js Anda mungkin terlihat seperti ini:

      src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import { Provider } from 'react-redux';
      import { createStore, applyMiddleware } from 'redux';
      import thunk from 'redux-thunk';
      import './index.css';
      import rootReducer from './reducers';
      import App from './App';
      import * as serviceWorker from './serviceWorker';
      
      // use applyMiddleware to add the thunk middleware to the store
      const store = createStore(rootReducer, applyMiddleware(thunk));
      
      ReactDOM.render(
        <Provider store={store}>
          <App />
        </Provider>,
        document.getElementById('root')
      );
      

      Sekarang, Redux Thunk diimpor dan diterapkan di aplikasi Anda.

      Menggunakan Thunk Redux di Aplikasi Sampel

      Kasus penggunaan paling umum untuk Redux Thunk adalah berkomunikasi secara asinkron dengan API eksternal untuk mengambil atau menyimpan data. Redux Thunk memudahkan pengiriman aksi yang mengikuti siklus hidup permintaan ke API eksternal.

      Membuat item agenda baru biasanya melibatkan pengiriman aksi terlebih dahulu untuk mengindikasikan bahwa pembuatan item agenda telah dimulai. Kemudian, jika item agenda berhasil dibuat dan dikembalikan oleh server eksternal, aksi lain akan dikirim bersama item agenda baru. Jika ada kesalahan dan agenda gagal disimpan di server, sebuah aksi bersama kesalahan dapat dikirim sebagai gantinya.

      Mari kita lihat cara melakukannya menggunakan Redux Thunk.

      Dalam komponen kontainer Anda, impor aksi dan kirimkan:

      src/containers/AddTodo.js

      import { connect } from 'react-redux';
      import { addTodo } from '../actions';
      import NewTodo from '../components/NewTodo';
      
      const mapDispatchToProps = dispatch => {
        return {
          onAddTodo: todo => {
            dispatch(addTodo(todo));
          }
        };
      };
      
      export default connect(
        null,
        mapDispatchToProps
      )(NewTodo);
      

      Aksi ini akan menggunakan Axios untuk mengirim permintaan POST ke titik akhir di JSONPlaceholder (https://jsonplaceholder.typicode.com/todos):

      src/actions/index.js

      import {
        ADD_TODO_SUCCESS,
        ADD_TODO_FAILURE,
        ADD_TODO_STARTED,
        DELETE_TODO
      } from './types';
      
      import axios from 'axios';
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(`https://jsonplaceholder.typicode.com/todos`, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              dispatch(addTodoSuccess(res.data));
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      const addTodoSuccess = todo => ({
        type: ADD_TODO_SUCCESS,
        payload: {
          ...todo
        }
      });
      
      const addTodoStarted = () => ({
        type: ADD_TODO_STARTED
      });
      
      const addTodoFailure = error => ({
        type: ADD_TODO_FAILURE,
        payload: {
          error
        }
      });
      

      Perhatikan cara pembuat aksi addTodo mengembalikan fungsi sebagai ganti objek aksi reguler. Fungsi itu menerima metode pengiriman dari penyimpanan.

      Di dalam isi fungsi, Anda mengirim aksi sinkron segera ke penyimpanan terlebih dahulu untuk mengindikasikan bahwa Anda telah mulai menyimpan agenda bersama API eksternal. Kemudian, Anda membuat permintaan POST sesungguhnya ke server menggunakan Axios. Pada respons yang berhasil dari server, Anda mengirim aksi sinkron yang berhasil bersama data yang diterima dari respons tersebut, tetapi bila respons gagal, kita mengirim tindakan sinkron yang berbeda bersama pesan kesalahan.

      Saat menggunakan API yang bersifat eksternal, seperti JSONPlaceholder dalam kasus ini, kita bisa melihat penundaan jaringan yang terjadi sesungguhnya. Namun, jika Anda menggunakan server backend lokal, respons jaringan mungkin menjadi terlalu cepat mengalami penundaan jaringan yang nanti dialami pengguna sesungguhnya, sehingga Anda dapat menambahkan penundaan buatan saat pengembangan:

      src/actions/index.js

      // ...
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(ENDPOINT, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              setTimeout(() => {
                dispatch(addTodoSuccess(res.data));
              }, 2500);
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      // ...
      

      Untuk menguji skenario kesalahan, Anda dapat melontarkan kesalahan secara manual:

      src/actions/index.js

      // ...
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(ENDPOINT, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              throw new Error('addToDo error!');
              // dispatch(addTodoSuccess(res.data));
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      // ...
      

      Untuk kelengkapan, inilah contoh bentuk reducer agenda untuk menangani siklus hidup penuh dari permintaan:

      src/reducers/todosReducer.js

      import {
        ADD_TODO_SUCCESS,
        ADD_TODO_FAILURE,
        ADD_TODO_STARTED,
        DELETE_TODO
      } from '../actions/types';
      
      const initialState = {
        loading: false,
        todos: [],
        error: null
      };
      
      export default function todosReducer(state = initialState, action) {
        switch (action.type) {
          case ADD_TODO_STARTED:
            return {
              ...state,
              loading: true
            };
          case ADD_TODO_SUCCESS:
            return {
              ...state,
              loading: false,
              error: null,
              todos: [...state.todos, action.payload]
            };
          case ADD_TODO_FAILURE:
            return {
              ...state,
              loading: false,
              error: action.payload.error
            };
          default:
            return state;
        }
      }
      

      Mendalami getState

      Selain menerima metode pengiriman dari status, fungsi yang dikembalikan oleh pembuat aksi asinkron bersama Redux Thunk juga menerima metode getState dari penyimpanan, sehingga nilai-nilai penyimpanan saat ini dapat dibaca:

      src/actions/index.js

      export const addTodo = ({ title, userId }) => {
        return (dispatch, getState) => {
          dispatch(addTodoStarted());
      
          console.log('current state:', getState());
      
          // ...
        };
      };
      

      Dengan hal tersebut di atas, status saat ini akan dicetak ke konsol saja.

      Misalnya:

      {loading: true, todos: Array(1), error: null}
      

      Penggunaan getState dapat digunakan untuk menangani hal-hal berbeda, bergantung pada status saat ini. Misalnya, jika ingin membatasi aplikasi pada empat item agenda saja untuk setiap kalinya, Anda dapat kembali dari fungsi jika status sudah berisi item agenda dalam jumlah maksimum:

      src/actions/index.js

      export const addTodo = ({ title, userId }) => {
        return (dispatch, getState) => {
          const { todos } = getState();
      
          if (todos.length > 4) return;
      
          dispatch(addTodoStarted());
      
          // ...
        };
      };
      

      Dengan hal tersebut di atas, aplikasi akan dibatasi pada empat item agenda.

      Kesimpulan

      Dalam tutorial ini, Anda telah mendalami penambahan Redux Thunk ke aplikasi React untuk memungkinkan pengiriman aksi secara asinkron. Hal ini berguna saat memanfaatkan penyimpanan Redux dan mengandalkan API eksternal.

      Jika Anda ingin mempelajari lebih lanjut tentang React, lihat seri Cara Melakukan Pengodean di React.js dari kami, atau baca halaman topik React kami untuk proyek pemrograman dan latihan.



      Source link

      Memahami Cara Render Larik di React


      Pengantar

      Artikel ini akan mengajari Anda cara merender larik di React dan praktik terbaik yang digunakan saat merender elemen berbeda di dalam komponen.

      Salah satu keuntungan menggunakan bahasa web modern seperti JavaScript adalah Anda dapat mengotomatiskan pembuatan potongan HTML.

      Dengan menggunakan sesuatu seperti loop terhadap larik atau objek, berarti Anda hanya perlu menulis HTML per item satu kali. Apa lagi, semua editan berikutnya hanya perlu diterapkan sekali.

      Merender Beberapa Elemen Sekaligus

      Untuk merender beberapa elemen JSX sekaligus di React, Anda dapat memproses sebuah larik dengan metode .map() dan mengembalikan elemen tunggal.

      Di bawah ini, Anda memproses larik reptiles dan mengembalikan elemen li untuk setiap item di larik. Anda dapat menggunakan metode ini bila ingin menampilkan elemen tunggal untuk setiap item di larik:

      function ReptileListItems() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return reptiles.map((reptile) => <li>{reptile}</li>);
      }
      

      Keluarannya akan terlihat seperti ini:

      Output

      - alligator - snake - lizard

      Dalam contoh selanjutnya, Anda akan memeriksa alasan perlunya menambahkan key unik ke daftar elemen yang dirender oleh larik.

      Merender Kumpulan Elemen di Dalam Komponen

      Dalam contoh ini, Anda memproses larik dan membuat serangkaian komponen item daftar seperti contoh sebelumnya.

      Untuk memulai, perbarui kode agar menggunakan komponen <ol> untuk menyimpan item <li>. Komponen <ol> akan membuat daftar item yang telah diurutkan:

      function ReptileList() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return (
          <ol>
            {reptiles.map((reptile) => (
              <li>{reptile}</li>
            ))}
          </ol>
        );
      }
      

      Namun, jika mengamati konsol, Anda akan melihat peringatan bahwa setiap anak di suatu larik atau iterator harus memiliki kunci unik.

      Peringatan di konsol

      Peringatan tersebut muncul karena saat Anda mencoba merender suatu kumpulan di dalam komponen, Anda harus menambahkan sebuah key.

      Dalam React, key unik digunakan untuk menentukan komponen dalam suatu kumpulan yang harus dirender kembali. Menambahkan key unik akan mencegah React dari keharusan merender kembali keseluruhan komponen setiap kali ada pembaruan.

      Dalam langkah ini, Anda akan merender beberapa elemen sekaligus dalam komponen dan menambahkan key unik. Perbarui kode untuk menyertakan key di item daftar untuk menyelesaikan peringatan:

      function ReptileList() {
        const reptiles = ['alligator', 'snake', 'lizard'];
      
        return (
          <ol>
            {reptiles.map(reptile => (
              <li key={reptile}>{reptile}</li>
            ))}
          </ol>
        );
      }
      
      

      Karena Anda telah menambahkan key, peringatan tersebut tidak akan ada lagi di konsol.

      Dalam contoh selanjutnya, Anda akan melihat cara merender elemen yang berdekatan tanpa mengalami kesalahan sintaks umum.

      Merender Elemen yang Berdekatan

      Di JSX, untuk merender lebih dari satu elemen dalam suatu komponen, Anda harus menambahkan pembungkus di sekelilingnya.

      Dalam contoh ini, Anda pertama-tama akan mengembalikan daftar item tanpa memproses suatu larik:

      function ReptileListItems() {
        return (
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        );
      }
      

      Ini akan memberi Anda pesan kesalahan keras di konsol:

      Kesalahan keras dari React untuk elemen JSX yang Berdekatan

      Untuk memperbaiki kesalahan ini, Anda perlu membungkus blok elemen li dalam pembungkus. Untuk daftar yang dapat Anda gunakan membungkus elemen ol atau ul:

      function ReptileListItems() {
        return (
        <ol>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        </ol>
        );
      }
      

      Elemen <li> yang berdekatan kini dibungkus dalam tag pengurung <ol>, dan Anda tidak akan lagi melihat kesalahan.

      Di bagian selanjutnya, Anda akan merender daftar dalam pembungkus menggunakan komponen fragment.

      Merender Elemen yang Berdekatan dengan React.fragment

      Sebelum React v16.2, Anda dapat membungkus blok komponen dalam elemen <div>. Ini akan menghasilkan aplikasi yang penuh dengan divs, yang seringkali disebut “div soup”.

      Untuk memperbaiki masalah ini, React merilis komponen baru yang dikenal sebagai komponen fragment:

      Bila perlu merender daftar di dalam tag pengurung tetapi ingin menghindari keharusan menggunakan div, Anda dapat menggunakan React.Fragment sebagai gantinya:

      function ReptileListItems() {
        return (
        <React.Fragment>
           <li>alligator</li>
           <li>snake</li>
           <li>lizard</li>
        </React.Fragment>
        );
      }
      

      Kode yang dirender hanya akan menyertakan elemen li dan komponen React.Fragment tidak akan muncul dalam kode.

      Elemen JSX yang dirender di dalam pembungkus React.Fragment

      Juga, perhatikan bahwa dengan React.fragment kita tidak perlu menambahkan kunci.

      Anda mungkin merasa bahwa menulis React.fragment lebih membosankan daripada menambahkan <div>. Untungnya, tim React telah mengembangkan sintaks yang lebih pendek untuk mewakili komponen ini. Anda dapat menggunakan <> </> sebagai ganti <React.Fragment></React.Fragment>:

      function ReptileListItems() {
        return (
       <>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
       </>
        );
      }
      

      Kesimpulan

      Dalam artikel ini, Anda telah mendalami berbagai contoh cara merender larik dalam aplikasi React.

      Bila merender elemen di dalam komponen lain, Anda harus menggunakan key unik dan membungkus elemen di dalam elemen pembungkus.

      Tergantung kasus penggunaan, Anda dapat membuat daftar sederhana yang dibungkus dalam komponen fragment yang tidak membutuhkan kunci.

      Untuk mempelajari selengkapnya tentang praktik terbaik di React, ikuti seri lengkap Cara Menulis Kode di React.js di DigitalOcean.



      Source link

      Memahami Kait Siklus Hidup Vue.js


      Pengantar

      Kait siklus hidup (lifecycle hook) adalah jendela menuju cara kerja pustaka yang Anda gunakan di belakang layar. Kait siklus hidup memungkinkan Anda untuk mengetahui kapan komponen Anda dibuat, ditambahkan ke DOM, diperbarui, atau dihancurkan.

      Diagram dari dokumentasi Vue.js resmi ini merangkum Siklus Hidup Instans Vue.js:

      Diagram Siklus Hidup Instans Vue.js

      Artikel ini akan memperkenalkan Anda terhadap penciptaan, pemasangan, pembaruan, dan penghancuran kait.

      Memahami Kait Penciptaan (Inisialisasi)

      Kait penciptaan (creation hook) adalah kait paling pertama yang berjalan di komponen Anda. Kait ini memungkinkan Anda untuk melakukan tindakan bahkan sebelum komponen ditambahkan ke DOM. Tidak seperti kait lainnya, kait penciptaan juga berjalan selama perenderan sisi-server.

      Gunakan kait penciptaan jika Anda perlu menyiapkan sesuatu di dalam komponen, baik selama perenderan klien dan perenderan server.

      Anda tidak akan memiliki akses ke DOM atau elemen pemasangan target (this.$el) di dalam kait penciptaan.

      beforeCreate

      Kait beforeCreate berjalan saat inisialisasi paling pertama dari komponen Anda. data belum dibuat reaktif, dan events belum disiapkan:

      ExampleComponent.vue

      <script>
      export default {
        beforeCreate() {
          console.log('At this point, events and lifecycle have been initialized.')
        }
      }
      </script>
      

      Dalam contoh ini, ketika kait beforeCreate dijalankan, cuplikan ini akan mencatatkan pesan: At this point, events and lifecycle have been initialized..

      created

      Anda dapat mengakses data reaktif dan events yang aktif dengan kait created. Templat dan DOM Virtual belum terpasang atau dirender:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{ propertyComputed }}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            property: 'Example property.'
          }
        },
      
        computed: {
          propertyComputed() {
            return this.property
          }
        },
      
        created() {
          console.log('At this point, this.property is now reactive and propertyComputed will update.')
          this.property = 'Example property updated.'
        }
      }
      </script>
      

      Dalam contoh ini, cuplikan akan menyimpan property sebagai Example property. Ketika kait created dijalankan, pesan At this point, this.property is now reactive and propertyComputed will update. akan tercatat, dan property berubah menjadi Example property updated.

      Kelak di siklus hidupnya, {{ propertyComputed }} akan muncul sebagai Example property updated alih-alih Example property.

      Dalam langkah ini, Anda telah meninjau beberapa contoh dari kait penciptaan dan siap berpindah ke bagian selanjutnya dari siklus hidup, yaitu memasang kait.

      Memahami Kait Pemasangan (Penyisipan DOM)

      Kait Pemasangan (mounting hook) adalah kait yang paling sering digunakan. Kait ini memungkinkan Anda untuk mengakses komponen segera sebelum dan setelah render pertama. Namun, itu tidak berjalan selama perenderan sisi-server.

      Gunakan kait pemasangan jika Anda perlu untuk mengakses atau memodifikasi DOM dari komponen segera sebelum atau sesudah render awal.

      Jangan gunakan kait pemasangan jika Anda perlu mengambil sebagian data untuk komponen pada saat inisialisasi.

      Catatan: Gunakan created (atau created dan activated untuk komponen keep-alive) untuk ini sebagai gantinya. Terutama jika Anda memerlukan data tersebut selama perenderan sisi-server.

      beforeMount

      Kait beforeMount berjalan tepat sebelum render awal terjadi dan setelah fungsi template atau render telah dikompilasi:

      ExampleComponent.vue

      <script>
      export default {
        beforeMount() {
          console.log(`At this point, vm.$el has not been created yet.`)
        }
      }
      </script>
      

      Dalam contoh ini, saat kait beforeMount dijalankan, cuplikan ini akan mencatatkan pesan: At this point, vm.$el has not been created yet..

      mounted

      Dalam kait mounted ini, Anda akan memiliki akses penuh ke komponen reaktif, templat, dan DOM yang telah dirender (via this.$el).

      Gunakan mounted untuk memodifikasi DOM — khususnya saat mengintegrasikan pustaka non-Vue:

      ExampleComponent.vue

      <template>
        <div ref="example-element">Example component.</div>
      </template>
      
      <script>
      export default {
        mounted() {
          console.log(`At this point, vm.$el has been created and el has been replaced.`);
          console.log(this.$el.textContent) // Example component.
        }
      }
      </script>
      

      Dalam contoh ini, saat kait mounted dijalankan, cuplikan ini akan mencatatkan pesan At this point, vm.$el has been created and el has been replaced.. Sebagai tambahan, pesan Example content. (this.$el.textContent) akan tercatat.

      Di bagian ini, Anda telah mendalami kasus penggunaan untuk kait pemasangan. Dalam langkah berikutnya, Anda akan meninjau beberapa contoh yang menggunakan kait pembaruan.

      Memahami Kait Pembaruan (Diff & Render Ulang)

      Kait pembaruan (updating hook) dipanggil setiap kali properti reaktif yang digunakan oleh komponen Anda berubah atau ada hal lain yang menyebabkannya melakukan render ulang. Kait ini memungkinkan Anda untuk mengaitkan ke siklus watch-compute-render dari komponen.

      Gunakan kait pembaruan jika Anda perlu mengetahui kapan komponen merender ulang, mungkin untuk pengawakutuan atau pemrofilan.

      Jangan gunakan kait pembaruan jika Anda perlu mengetahui kapan properti reaktif pada komponen berubah. Sebagai gantinya, gunakan properti terkomputasi atau pemantau (watcher) untuk hal itu.

      beforeUpdate

      Kait beforeUpdate berjalan setelah perubahan data pada komponen dan siklus pembaruan dimulai, tepat sebelum DOM ditambal dan dirender ulang.

      Gunakan beforeUpdate jika Anda perlu mendapatkan keadaan baru dari data reaktif apa pun pada komponen Anda sebelum benar-benar dirender:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        beforeUpdate() {
          console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
          // Logs the counter value every second, before the DOM updates.
          console.log(this.counter)
        }
      }
      </script>
      

      Pertama-tama, cuplikan ini akan menyimpan counter sebagai 0. Ketika kait created dijalankan, kait tersebut akan menambahkan counter setiap 1000 milidetik. Ketika kait beforeUpdate dijalankan, cuplikan ini akan mencatatkan pesan: At this point, Virtual DOM has not re-rendered or patched yet. dan angka counter tercatat.

      updated

      Kait updated berjalan setelah perubahan data pada komponen dan DOM merender ulang.

      Gunakan updated jika Anda perlu mengakses DOM setelah perubahan properti:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        updated() {
          console.log(`At this point, Virtual DOM has re-rendered and patched.`)
          // Fired every second, should always be true
          console.log(+this.$refs['example-element'].textContent === this.counter)
        }
      }
      </script>
      

      Pertama-tama, cuplikan ini akan menyimpan counter sebagai 0. Ketika kait created dijalankan, kait tersebut akan menambahkan counter setiap 1000 milidetik. Ketika kait updated dijalankan, cuplikan ini akan mencatatkan pesan: At this point, Virtual DOM has re-rendered and patched. dan nilai boolean true tercatat karena nilai yang dirender dan nilai saat ini adalah sama.

      Karena Anda telah mendalami penggunaan kait pembaruan, sekarang Anda siap mempelajari tentang kait penghancuran.

      Memahami Kait Penghancuran (Perobohan)

      _Kait penghancuran _(destruction hook) memungkinkan Anda untuk melakukan tindakan ketika komponen dihancurkan, seperti pembersihan atau pengiriman analisis. Kait ini berfungsi saat komponen Anda dirobohkan atau dihapus dari DOM.

      beforeDestroy

      beforeDestroy berfungsi tepat sebelum perobohan. Komponen Anda tetap akan ada dan berfungsi.

      Gunakan beforeDestroy jika Anda perlu membersihkan peristiwa atau langganan reaktif:

      ExampleComponent.vue

      <script>
      export default {
        data() {
          return {
            exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
          }
        },
      
        beforeDestroy() {
          console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
          // Perform the teardown procedure for exampleLeakyProperty.
          // (In this case, effectively nothing)
          this.exampleLeakyProperty = null
          delete this.exampleLeakyProperty
        }
      }
      </script>
      

      Cuplikan ini akan menyimpan exampleLeakyProperty terlebih dahulu. Ketika kait beforeDestroy dijalankan, cuplikan ini akan mencatatkan pesan At this point, watchers, child components, and event listeners have not been torn down yet., kemudian exampleLeakyProperty dihapus.

      destroyed

      Saat Anda mencapai kait destroyed, pada dasarnya, tidak ada yang tersisa pada komponen Anda. Semua yang melekat padanya telah dihancurkan.

      Gunakan destroyed jika Anda perlu melakukan pembersihan di menit-menit terakhir atau menginformasikan server jauh bahwa komponen telah dihancurkan:

      ExampleComponent.vue

      <script>
      import ExampleAnalyticsService from './example-analytics-service'
      
      export default {
        destroyed() {
          console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
          console.log(this)
          ExampleAnalyticsService.informService('Component destroyed.')
        }
      }
      </script>
      

      Pertama-tama, cuplikan ini akan mengimpor ExampleAnalyticsService. Ketika kait beforeDestroy dijalankan, cuplikan ini akan mencatatkan pesan At this point, watchers, child components, and event listeners have been torn down.. Yang tersisa dari komponen akan dicatat ke konsol, dan ExampleAnalyticsService akan meneruskan pesan Component destroyed..

      Dengan itu, Anda telah menyelesaikan tinjauan umum dari kait siklus hidup Vue.js.

      Kait Lainnya

      Ada dua kait lainnya, activated dan deactivated. Ini untuk komponen keep-alive, topik yang berada di luar lingkup artikel ini.

      Bisa dibilang, kait ini memungkinkan Anda untuk mendeteksi saat komponen yang dikemas dalam suatu tag <keep-alive></keep-alive> dihidupkan atau dimatikan. Anda mungkin menggunakannya untuk mengambil data untuk komponen atau menangani perubahan keadaan, yang berperilaku secara efektif sebagai created dan beforeDestroy tanpa harus melakukan pembangunan ulang komponen sepenuhnya.

      Kesimpulan

      Dalam artikel ini, Anda telah diperkenalkan dengan berbagai kait siklus hidup yang tersedia dalam Siklus Hidup Instans Vue.js. Anda telah mendalami beberapa kasus penggunaan yang berbeda tentang kait penciptaan, kait pemasangan, kait pembaruan, dan kait penghancuran.

      Jika Anda ingin mempelajari lebih lanjut tentang Vue.js, lihat laman topik Vue.js kami untuk proyek latihan dan pemrograman.



      Source link