Kait adalah fungsi yang dapat digunakan kembali. Mereka memungkinkan Anda untuk menggunakan negara dan fitur lainnya (misalnya metode siklus hidup dan sebagainya) tanpa menulis kelas. Fungsi kait memungkinkan kita "menghubungkan" ke Siklus hidup status reaksi menggunakan komponen fungsional, memungkinkan kita untuk memanipulasi keadaan komponen fungsional kita tanpa perlu mengubahnya menjadi komponen kelas.
Bereaksi kait yang diperkenalkan kembali di versi 16.8 dan telah menambahkan lebih banyak sejak itu. Beberapa lebih digunakan dan populer daripada yang lain, seperti useEffect, useState, dan useContext kait. Saya tidak ragu bahwa Anda telah mencapainya jika Anda bekerja dengan React.
Tetapi yang saya minati adalah kait React yang kurang dikenal. Sementara semua hook React menarik dengan caranya sendiri, ada lima di antaranya yang benar-benar ingin saya tunjukkan kepada Anda karena mereka mungkin tidak muncul dalam pekerjaan sehari-hari Anda — atau mungkin mereka melakukannya dan mengetahui mereka memberi Anda beberapa kekuatan super tambahan.
Daftar Isi
useReducer
Grafik useReducer hook adalah alat manajemen negara seperti kait lainnya. Secara khusus, ini adalah alternatif untuk useState menghubungkan.
Jika Anda menggunakan useReducer kait untuk mengubah dua atau lebih status (atau tindakan), Anda tidak perlu memanipulasi status tersebut satu per satu. Hook melacak semua negara bagian dan mengelolanya secara kolektif. Dengan kata lain: ia mengelola dan merender ulang perubahan status. tidak seperti useState kait, useReducer lebih mudah dalam menangani banyak negara bagian dalam proyek yang kompleks.
Gunakan kasus
useReducer dapat membantu mengurangi kerumitan bekerja dengan banyak status. Gunakan saat Anda merasa perlu melacak beberapa status secara kolektif, karena ini memungkinkan Anda untuk memperlakukan manajemen status dan logika rendering komponen sebagai masalah terpisah.
Sintaksis
useReducer menerima tiga argumen, salah satunya adalah opsional:
- fungsi peredam
initialState- an
initfungsi (opsional)
const [state, dispatch] = useReducer(reducer, initialState)
const [state, dispatch] = useReducer(reducer, initialState initFunction) // in the case where you initialize with the optional 3rd argumentContoh
Contoh berikut adalah antarmuka yang berisi input teks, penghitung, dan tombol. Berinteraksi dengan setiap elemen memperbarui status. Perhatikan caranya useReducer memungkinkan kita untuk mendefinisikan beberapa kasus sekaligus daripada mengaturnya satu per satu.
import { useReducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
case 'USER_INPUT':
return { ...state, userInput: action.payload };
case 'TOGGLE_COLOR':
return { ...state, color: !state.color };
default:
throw new Error();
}
}
function App() {
const [state, dispatch] = useReducer(reducer, { count: 0, userInput: '', color: false })
return (
<main className="App, App-header" style={{ color: state.color ? '#000' : '#FF07FF'}}>
<input style={{margin: '2rem'}}
type="text"
value={state.userInput}
onChange={(e) => dispatch({ type: 'USER_INPUT', payload: e.target.value })}
/>
<br /><br />
<p style={{margin: '2rem'}} >{state.count}</p>
<section style={{margin: '2rem'}}>
<button onClick={(() => dispatch({ type: 'DECREMENT' }))}>-</button>
<button onClick={(() => dispatch({ type: 'INCREMENT' }))}>+</button>
<button onClick={(() => dispatch({ type: 'TOGGLE_COLOR' }))}>Color</button>
</section>
<br /><br />
<p style={{margin: '2rem'}}>{state.userInput}</p>
</main>
);
}
export default App;Dari kode di atas, perhatikan bagaimana kita dapat dengan mudah mengelola beberapa status di peredam (switch-case), ini menunjukkan manfaat dari useReducer. Ini adalah kekuatan yang diberikannya saat bekerja dalam aplikasi kompleks dengan banyak status.
useRef
Grafik useRef hook digunakan untuk membuat referensi pada elemen untuk mengakses DOM. Tetapi lebih dari itu, ia mengembalikan objek dengan .current properti yang dapat digunakan di seluruh siklus hidup komponen, memungkinkan data bertahan tanpa menyebabkan rendering ulang. Sehingga useRef nilai tetap sama di antara render; memperbarui referensi tidak memicu rendering ulang.
Gunakan kasus
Raih useRef kait ketika Anda ingin:
- Memanipulasi DOM dengan menyimpan informasi yang bisa berubah.
- Akses informasi dari komponen anak (elemen bersarang).
- Tetapkan fokus pada sebuah elemen.
Ini paling berguna saat menyimpan data yang dapat diubah di aplikasi Anda tanpa menyebabkan rendering ulang.
Sintaksis
useRef hanya menerima satu argumen, yaitu nilai awal.
const newRefComponent = useRef(initialValue);Contoh
Di sini saya menggunakan useRef dan useState hook untuk menunjukkan berapa kali aplikasi membuat status yang diperbarui saat mengetik input teks.
import './App.css'
function App() {
const [anyInput, setAnyInput] = useState(" ");
const showRender = useRef(0);
const randomInput = useRef();
const toggleChange = (e) => {
setAnyInput (e.target.value);
showRender.current++;
}
const focusRandomInput = () => {
randomInput.current.focus();
}
return (
<div className="App">
<input className="TextBox"
ref ={randomInput} type="text" value={anyInput} onChange={toggleChange}
/>
<h3>Amount Of Renders: {showRender.current}</h3>
<button onClick={focusRandomInput}>Click To Focus On Input </button>
</div>
);
}
export default App;Perhatikan bagaimana mengetik setiap karakter di bidang teks memperbarui status aplikasi, tetapi tidak pernah memicu rendering ulang yang lengkap.
useImperativeHandle
Anda tahu bagaimana komponen anak memiliki akses ke fungsi panggilan yang diturunkan dari komponen induk? Orang tua menurunkannya melalui alat peraga, tetapi transfer itu "searah" dalam arti bahwa orang tua tidak dapat memanggil fungsi yang ada di anak.
Nah, useImperativeHandle memungkinkan orang tua untuk mengakses fungsi komponen anak.
Bagaimana cara kerjanya?
- Sebuah fungsi didefinisikan dalam komponen anak.
- A
refditambahkan pada induknya. - Kami menggunakan
forwardRef, memungkinkanrefyang ditetapkan untuk diteruskan ke anak. useImperativeHandlemengekspos fungsi anak melaluiref.
Gunakan kasus
useImperativeHandle bekerja dengan baik ketika Anda ingin komponen induk terpengaruh oleh perubahan pada anak. Jadi, hal-hal seperti fokus yang berubah, penambahan dan pengurangan, dan elemen kabur mungkin merupakan situasi di mana Anda menemukan diri Anda meraih kait ini sehingga induk dapat diperbarui sesuai dengan itu.
Sintaksis
useImperativeHandle (ref, createHandle, [dependencies])Contoh
Dalam contoh ini, kami memiliki dua tombol, satu di komponen induk dan satu lagi di anak. Mengklik tombol induk mengambil data dari anak, memungkinkan kita untuk memanipulasi komponen induk. Ini diatur sehingga mengklik tombol anak tidak meneruskan apa pun dari komponen induk ke anak untuk membantu mengilustrasikan bagaimana kita meneruskan sesuatu ke arah yang berlawanan.
// Parent component
import React, { useRef } from "react";
import ChildComponent from "./childComponent";
import './App.css';
function useImperativeHandle() {
const controlRef = useRef(null);
return (
onClick={
() => {
controlRef.current.controlPrint();
}
}
>
Parent Box
);
}
export default useImperativeHandle;// Child component
import React, { forwardRef, useImperativeHandle, useState } from "react";
const ChildComponent = forwardRef((props, ref) => {
const [print, setPrint] = useState(false);
useImperativeHandle(ref, () => ({
controlPrint()
{ setPrint(!print); },
})
);
return (
<>
Child Box
{ print && I am from the child component }
);
});
export default ChildComponent;Keluaran
useMemo
useMemo adalah salah satu hook React yang paling jarang digunakan tetapi paling menarik. Ini dapat meningkatkan kinerja dan mengurangi latensi, terutama pada komputasi besar di aplikasi Anda. Bagaimana? Setiap kali status komponen diperbarui dan komponen dirender ulang, useMemo hook mencegah React dari keharusan menghitung ulang nilai.
Soalnya, fungsi merespons perubahan status. Itu useMemo kait mengambil fungsi dan mengembalikan nilai pengembalian dari fungsi itu. Ini menyimpan nilai itu untuk mencegah pengeluaran upaya tambahan untuk merender ulang, lalu mengembalikannya ketika salah satu dependensi telah berubah.
Proses ini disebut memoisasi dan itulah yang membantu meningkatkan kinerja dengan mengingat nilai dari permintaan sebelumnya sehingga dapat digunakan lagi tanpa mengulangi semua matematika itu.
Gunakan kasus
Kasus penggunaan terbaik adalah setiap kali Anda bekerja dengan perhitungan berat di mana Anda ingin menyimpan nilai dan menggunakannya pada perubahan status berikutnya. Ini bisa menjadi kemenangan kinerja yang bagus, tetapi menggunakannya terlalu banyak dapat memiliki efek sebaliknya dengan memonopoli memori aplikasi Anda.
Sintaksis
useMemo( () =>
{ // Code goes here },
[]
)Contoh
Saat mengklik tombol, program mini ini menunjukkan kapan suatu angka genap atau ganjil, lalu mengkuadratkan nilainya. Saya menambahkan banyak angka nol ke loop untuk meningkatkan daya komputasinya. Ini mengembalikan nilai dalam hitungan detik dan masih berfungsi dengan baik karena useMemo menghubungkan.
// UseMemo.js
import React, { useState, useMemo } from 'react'
function Memo() {
const [memoOne, setMemoOne] = useState(0);
const incrementMemoOne = () => { setMemoOne(memoOne + 1) }
const isEven = useMemo(() => {
let i = 0 while (i < 2000000000) i++ return memoOne % 2 === 0
},
[memoOne]);
const square = useMemo(()=> {
console.log("squared the number"); for(var i=0; i < 200000000; i++);
return memoOne * memoOne;
},
[memoOne]);
return (
Memo One -
{ memoOne }
{ isEven ? 'Even' : 'Odd' } { square }
);
}
export default MemoKeluaran
useMemo sedikit seperti useCallback kait, tetapi perbedaannya adalah itu useMemo dapat menyimpan nilai yang diingat dari suatu fungsi, di mana useCallback menyimpan fungsi yang diingat itu sendiri.
useCallback
Grafik useCallback hook adalah salah satu yang menarik dan bagian terakhir adalah semacam peringatan spoiler untuk apa yang dilakukannya.
Seperti yang baru saja kita lihat, useCallback bekerja seperti useMemo kaitkan bahwa mereka berdua menggunakan memoisasi untuk menyimpan sesuatu untuk digunakan nanti. Ketika useMemo menyimpan perhitungan fungsi sebagai nilai cache, useCallback menyimpan dan mengembalikan suatu fungsi.
Gunakan kasus
Seperti useMemo, useCallback adalah pengoptimalan kinerja yang bagus karena menyimpan dan mengembalikan panggilan balik memo dan semua dependensinya tanpa rendering ulang.
Sintaksis
const getMemoizedCallback = useCallback (
() => { doSomething () }, []
);Contoh
{ useCallback, useState } from "react";
import CallbackChild from "./UseCallback-Child";
import "./App.css"
export default function App() {
const [toggle, setToggle] = useState(false);
const [data, setData] = useState("I am a data that would not change at every render, thanks to the useCallback");
const returnFunction = useCallback(
(name) =>
{ return data + name; }, [data]
);
return (
onClick={() => {
setToggle(!toggle);
}}
>
{" "}
// Click To Toggle
{ toggle && h1. Toggling me no longer affects any function }
);
}// The Child component
import React, { useEffect } from "react";
function CallbackChild(
{ returnFunction }
) {
useEffect(() =>
{ console.log("FUNCTION WAS CALLED"); },
[returnFunction]);
return { returnFunction(" Hook!") };
}
export default CallbackChild;Keluaran
Pesan terakhir
Ini dia! Kami baru saja melihat lima kait React yang sangat berguna yang menurut saya sering diabaikan. Seperti banyak roundup seperti ini, kami hanya menggores permukaan kait ini. Masing-masing memiliki nuansa dan pertimbangan tersendiri untuk dipertimbangkan saat Anda menggunakannya. Tapi mudah-mudahan Anda memiliki gagasan tingkat tinggi yang bagus tentang apa itu dan kapan mereka mungkin lebih cocok daripada kait lain yang mungkin Anda raih lebih sering.
Cara terbaik untuk memahaminya sepenuhnya adalah dengan berlatih. Jadi saya mendorong Anda untuk berlatih menggunakan kait ini dalam aplikasi Anda untuk pemahaman yang lebih baik. Untuk itu, Anda bisa mendapatkan cara yang lebih mendalam dengan memeriksa sumber daya berikut:
