React Hooks

  • Post
    React Hooks

    Hooks adalah fitur baru yang diperkenalkan dalam versi React 16.8. Ini memungkinkan Anda untuk menggunakan state dan fitur React lainnya tanpa menulis kelas. Hooks adalah fungsi yang “menghubungkan” status React dan fitur siklus hidup dari komponen fungsi. Itu tidak berfungsi di dalam kelas.

    Hooks kompatibel ke belakang, yang berarti tidak mengandung perubahan apa pun yang merusak. Juga, itu tidak menggantikan pengetahuan Anda tentang konsep React.

    Kapan menggunakan Hooks

    Jika Anda menulis komponen fungsi, dan kemudian Anda ingin menambahkan beberapa status padanya, sebelumnya Anda melakukannya dengan mengubahnya menjadi kelas. Tapi, sekarang Anda bisa melakukannya dengan menggunakan Hook di dalam komponen fungsi yang sudah ada.

    Aturan Hooks

    Hooks mirip dengan fungsi JavaScript, tetapi Anda harus mengikuti dua aturan ini saat menggunakannya. Aturan Hooks memastikan bahwa semua logika stateful dalam sebuah komponen terlihat dalam kode sumbernya. Aturan-aturan ini adalah:

    1. Hanya panggil Hooks di tingkat atas

    Jangan panggil Hooks di dalam loop, condition, atau fungsi bertingkat. Hooks harus selalu digunakan di level teratas fungsi React. Aturan ini memastikan bahwa Hooks dipanggil dalam urutan yang sama setiap kali komponen dirender.

    1. Hanya panggil Hooks dari fungsi React

    Anda tidak dapat memanggil Hooks dari fungsi JavaScript biasa. Sebagai gantinya, Anda dapat memanggil Hooks dari komponen fungsi React. Hooks juga dapat dipanggil dari Hooks kustom.

    Prasyarat untuk React Hooks

    1. Node versi 6 atau lebih tinggi
    2. NPM versi 5.2 atau lebih tinggi
    3. Creat-react-aplikasi tool untuk menjalankan Aplikasi React

    Instalasi React Hooks

    Untuk menggunakan React Hooks, kita perlu menjalankan perintah berikut:

    • $ npm install react@16.8.0-alpha.1–save
    • $ npm install react-dom@16.8.0-alpha.1–save

    Perintah di atas akan menginstal versi alpha React dan React-DOM terbaru yang mendukung React Hooks. Pastikan file package.json mencantumkan dependensi React dan React-DOM seperti yang diberikan di bawah ini.

    1. “react”: “^16.8.0-alpha.1”,
    2. “react-dom”: “^16.8.0-alpha.1”,

     

    Hooks State

    Status hook adalah cara baru untuk mendeklarasikan status di aplikasi React. Hook menggunakan komponen fungsional useState () untuk menyetel dan mengambil status. Mari kita pahami status Hook dengan contoh berikut.

    App.js

    1. importReact, { useState } from ‘react’;
    2. function CountApp() {
    3. // Declare a new state variable, which we’ll call “count”
    4. const [count, setCount] = useState(0);
    5. return (
    6. <div>
    7. <p>You clicked {count} times</p>
    8. <button onClick={() => setCount(count + 1)}>
    9. Click me
    10. </button>
    11. </div>
    12. );
    13. }
    14. export defaultCountApp;

    Dalam contoh di atas, useState adalah Hook yang perlu dipanggil di dalam komponen fungsi untuk menambahkan beberapa status lokal padanya. UseState mengembalikan pasangan di mana elemen pertama adalah nilai status / nilai awal saat ini, dan yang kedua adalah fungsi yang memungkinkan kita untuk memperbaruinya. Setelah itu, kita akan memanggil fungsi ini dari event handler atau dari tempat lain. UseState mirip dengan this.setState di kelas. Kode yang setara tanpa Hooks terlihat seperti di bawah ini.

    App.js

    1. importReact, { useState } from ‘react’;
    2. classCountApp extendsComponent {
    3. constructor(props) {
    4. super(props);
    5. this.state = {
    6. count: 0
    7. };
    8. }
    9. render() {
    10. return(
    11. <div>
    12. <p><b>You clicked {this.state.count} times</b></p>
    13. <button onClick={() => this.setState({ count: this.state.count + 1})}>
    14. Click me
    15. </button>
    16. </div>
    17. );
    18. }
    19. }
    20. export defaultCountApp;

     

    Hooks Effect

    Effect Hook memungkinkan kita untuk melakukan efek samping (tindakan) dalam komponen fungsi. Itu tidak menggunakan metode siklus hidup komponen yang tersedia di komponen kelas. Dengan kata lain, Effects Hooks setara dengan metode siklus proses componentDidMount (), componentDidUpdate (), dan componentWillUnmount ().

    Efek samping memiliki fitur umum yang perlu dijalankan oleh sebagian besar aplikasi web, seperti:

    • Memperbarui DOM,
    • Mengambil dan mengonsumsi data dari API server,
    • Menyiapkan langganan, dll.

    Mari kita pahami Efek Hook dengan contoh berikut.

     


    import
     React, { useState, useEffect } from ‘react’;

    function CounterExample() {

    const [count, setCount] = useState(0);

    // Similar to componentDidMount and componentDidUpdate:

    useEffect(() => {

    // Update the document title using the browser API

    document.title = You clicked ${count} times;

    });

    return (

    <div>

    <p>You clicked {count} times</p>

    <button onClick={() => setCount(count + 1)}>

    Click me

    </button>

    </div>

    );

    }

    export default CounterExample;

    Kode di atas didasarkan pada contoh sebelumnya dengan fitur baru yang kami setel judul dokumen ke pesan khusus, termasuk jumlah klik.

    Dalam komponen React, terdapat dua jenis efek samping:

    1. Efek Tanpa Pembersihan
    2. Efek Dengan Pembersihan

    Efek tanpa Pembersihan

    Ini digunakan dalam useEffect yang tidak memblokir browser untuk memperbarui layar. Itu membuat aplikasi lebih responsif. Contoh paling umum dari efek yang tidak memerlukan pembersihan adalah mutasi DOM manual, Permintaan jaringan, Logging, dll.

    Efek dengan Pembersihan

    Beberapa efek memerlukan pembersihan setelah pembaruan DOM. Misalnya, jika kita ingin menyiapkan langganan ke beberapa sumber data eksternal, penting untuk membersihkan memori agar tidak terjadi kebocoran memori. React melakukan pembersihan memori saat komponen dilepas. Namun, seperti yang kita ketahui, efek berjalan untuk setiap metode render dan tidak hanya sekali. Oleh karena itu, React juga membersihkan efek dari render sebelumnya sebelum menjalankan efek di lain waktu.

    Custom Hooks

    Hook kustom adalah fungsi JavaScript. Nama Hook khusus dimulai dengan “use” yang dapat memanggil Hooks lainnya. Hook kustom sama seperti fungsi biasa, dan kata “use” di awal mengatakan bahwa fungsi ini mengikuti aturan Hooks. Membangun Hooks kustom memungkinkan Anda mengekstrak logika komponen menjadi fungsi yang dapat digunakan kembali.

    Mari kita pahami cara kerja Hooks kustom dalam contoh berikut.

    1. importReact, { useState, useEffect } from ‘react’;
    2. constuseDocumentTitle = title => {
    3. useEffect(() => {
    4. title = title;
    5. }, [title])
    6. }
    7. function CustomCounter() {
    8. const[count, setCount] = useState(0);
    9. constincrementCount = () => setCount(count + 1);
    10. useDocumentTitle(You clicked ${count} times);
    11. // useEffect(() => {
    12. //   document.title = You clicked ${count} times
    13. // });
    14. return(
    15. <div>
    16. <p>You clicked {count} times</p>
    17. <button onClick={incrementCount}>Click me</button>
    18. </div>
    19. )
    20. }
    21. export defaultCustomCounter;

    Dalam potongan di atas, useDocumentTitle adalah Hook kustom yang mengambil argumen sebagai string teks yang merupakan judul. Di dalam Hook ini, kita memanggil useEffect Hook dan menyetel judul selama judulnya telah berubah. Argumen kedua akan melakukan pemeriksaan itu dan memperbarui judul hanya ketika status lokalnya berbeda dari apa yang kita teruskan.

    Catatan: Hook kustom adalah konvensi yang secara alami mengikuti desain Hooks, bukan fitur React.

    Hook Bawaan

    Di sini, kami menjelaskan API untuk Hooks bawaan di React. Hooks bawaan dapat dibagi menjadi dua bagian, yang diberikan di bawah ini.

    Pengait Dasar

    • useState
    • useEffect
    • useContext

    Hook tambahan

    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperativeHandle
    • useLayoutEffect
    • useDebugValue

     

     

    credit. javatpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.