Reageer useCallbackHook
Die React useCallbackHook gee 'n gememoriseerde terugbelfunksie terug.
Dink aan memorisering as om 'n waarde te kas sodat dit nie herbereken hoef te word nie.
Dit stel ons in staat om hulpbronintensiewe funksies te isoleer sodat hulle nie outomaties op elke lewering sal loop nie.
Die useCallbackHook loop slegs wanneer een van sy afhanklikhede opgedateer word.
Dit kan prestasie verbeter.
Die useCallbacken useMemoHooks is soortgelyk. Die belangrikste verskil is dat useMemo'n gememoriseerde waarde terugstuur en useCallback'n gememoriseerde funksie . Jy kan meer leer oor useMemo in die useMemo- hoofstuk .
Probleem
Een rede om te gebruik useCallbackis om te verhoed dat 'n komponent weer vertoon word, tensy sy rekwisiete verander het.
In hierdie voorbeeld kan jy dink dat die Todoskomponent nie weer sal weergee nie, tensy die todosverandering:
Dit is 'n soortgelyke voorbeeld as die een in die React.memo- afdeling.
Voorbeeld:
index.js
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<>
<Todos todos={todos} addTodo={addTodo} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js
import { memo } from "react";
const Todos = ({ todos, addTodo }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</>
);
};
export default memo(Todos);
Probeer dit laat loop en klik op die teltoename-knoppie.
Jy sal agterkom dat die Todoskomponent weer vertoon word, selfs wanneer die todosverander nie.
Hoekom werk dit nie? Ons gebruik memo, so die Todoskomponent moet nie herweergegee word nie, aangesien nie die todostoestand of die addTodofunksie verander wanneer die telling verhoog word nie.
Dit is as gevolg van iets wat "verwysingsgelykheid" genoem word.
Elke keer as 'n komponent weergegee word, word sy funksies herskep. As gevolg hiervan het die addTodofunksie eintlik verander.
Word gesertifiseer!
$ 95 INSKRYF
Oplossing
Om dit reg te stel, kan ons die useCallbackhaak gebruik om te verhoed dat die funksie herskep word, tensy dit nodig is.
Gebruik die useCallbackhaak om te verhoed dat die Todoskomponent onnodig weergegee word:
Voorbeeld:
index.js
import { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = useCallback(() => {
setTodos((t) => [...t, "New Todo"]);
}, [todos]);
return (
<>
<Todos todos={todos} addTodo={addTodo} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js
import { memo } from "react";
const Todos = ({ todos, addTodo }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</>
);
};
export default memo(Todos);
Nou sal die Todoskomponent eers weer vertoon wanneer die todosstut verander.