Tepki useMemoKancası
React useMemoHook, hafızaya alınmış bir değer döndürür.
Not almayı, yeniden hesaplanmasına gerek kalmaması için bir değeri önbelleğe almak olarak düşünün.
Hook , useMemoyalnızca bağımlılıklarından biri güncellendiğinde çalışır.
Bu performansı artırabilir.
useMemove Kancalar useCallbackbenzerdir. Temel fark, useMemohafızaya alınmış bir değer ve
useCallbackhafızaya alınmış bir işlev döndürmesidir. Bunun hakkında daha fazla bilgiyi useCallbackuseCallback bölümünde bulabilirsiniz .
Verim
Hook , useMemopahalı, kaynak yoğun işlevlerin gereksiz yere çalışmasını önlemek için kullanılabilir.
Bu örnekte, her işlemede çalışan pahalı bir fonksiyonumuz var.
Sayımı değiştirirken veya yapılacak bir iş eklerken, yürütmede bir gecikme olduğunu fark edeceksiniz.
Örnek:
Kötü performans gösteren bir işlev. İşlev expensiveCalculationher işlemede çalışır:
import { useState } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = expensiveCalculation(count);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));
Sertikalı olmak!
95 $ KAYIT
Kullanmak useMemo
Bu performans sorununu çözmek için , işlevi useMemohafızaya almak için Kancayı kullanabiliriz expensiveCalculation. Bu, işlevin yalnızca gerektiğinde çalışmasına neden olur.
Pahalı işlev çağrısını ile sarabiliriz useMemo.
Hook , useMemobağımlılıkları bildirmek için ikinci bir parametreyi kabul eder. Pahalı işlev yalnızca bağımlılıkları değiştiğinde çalışır.
Aşağıdaki örnekte, pahalı işlev yalnızca count
değiştirildiğinde çalışır ve yapılacaklar eklendiğinde çalışmaz.
Örnek:
useMemoHook'u kullanan performans örneği :
import { useState, useMemo } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = useMemo(() => expensiveCalculation(count), [count]);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));