Dopo aver visto Context e State hook123 , per usare alcune funzioni della fotocamera è utile vedere anche Ref Hooks. Si usa in modo simile a State hook, ma senza far ripetere il rendering.
Si tratta di un hook di ReactJS (che si può usare anche con React Native).
Come con lo State hook, anche con Ref hook si deve subito inizializzare la variabile (variabileRef).
La differenza con lo State hook è che il cambiamento di questa variabile (variabileRef) non produce un nuovo rendering della schermata.
Proviamo a commentare un esempio di codice sorgente:
import { useRef } from 'react';
function App() {
const variabileRef = useRef(null);
return (
<Elemento
ref={variabileRef}
/>
}
riga 4) Ogni volta che si invoca useRef() si ottiene sempre la stessa variabile (un oggetto con la proprietà current) di nome variabileRef. Questa cosa è vera sempre tranne alla prima esecuzione, dove avviene l’inizializzazione. Nei rendering successivi l’inizializzazione non è eseguita.
riga 7) Per passarla dentro il rendering in JSX si deve usare l’attributo variabileRef
riga 4) L’oggetto VariabileRef.current è permanente (come accadeva per State hook) e per ottenerlo nella stessa variabile, si usa useRef()
La libreria della fotocamera usa questo hook. Si può usare questa variabile per contenere il dispositivo attivo della camera
import { useRef } from 'react';
function App() {
const cameraRef = useRef(null);
return (
<Camera
ref={cameraRef}
// la libreria riceve la proprietà 'variabileRef.current',
// e ne fa uso al suo interno (non si usa qui)
{...cameraProps}
/>
}