Phản ứng useMemo Hook
React useMemo Hook trả về một giá trị được ghi nhớ.
Hãy coi việc ghi nhớ như việc lưu vào bộ nhớ đệm một giá trị để không cần phải tính toán lại.
Hook useMemo chỉ chạy khi một trong các phần phụ thuộc của nó cập nhật.
Điều này có thể cải thiện hiệu suất.
Các móc useMemo và useCallback tương tự nhau. Sự khác biệt chính là useMemo trả về giá trị được ghi nhớ và useCallback trả về hàm được ghi nhớ. Bạn có thể tìm hiểu thêm về useCallback trong chương useCallback .
Hiệu suất
useMemo Hook có thể được sử dụng để giữ cho các chức năng tốn kém, sử dụng nhiều tài nguyên không chạy một cách không cần thiết.
Trong ví dụ này, chúng ta có một hàm đắt tiền chạy trên mọi kết xuất.
Khi thay đổi số lượng hoặc thêm việc cần làm, bạn sẽ nhận thấy độ trễ khi thực thi.
Ví dụ:
Một chức năng hoạt động kém. Hàm expensiveCalculation tính toán chạy trên mọi kết xuất:
import { useState } from "react"; import ReactDOM from "react-dom/client"; 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; }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);Được chứng nhận!
$95 ĐĂNG KÝ
Sử dụng useMemo
Để khắc phục sự cố hiệu suất này, chúng ta có thể sử dụng hook useMemo để ghi nhớ hàm tính expensiveCalculation . Điều này sẽ khiến chức năng chỉ chạy khi cần thiết.
Chúng ta có thể kết thúc cuộc gọi hàm đắt tiền bằng useMemo .
Hook useMemo chấp nhận tham số thứ hai để khai báo các phần phụ thuộc. Hàm đắt tiền sẽ chỉ chạy khi phần phụ thuộc của nó thay đổi.
Trong ví dụ sau, hàm đắt tiền sẽ chỉ chạy khi count thay đổi chứ không chạy khi thêm việc cần làm.
Ví dụ:
Ví dụ về hiệu suất sử dụng hook useMemo :
import { useState, useMemo } from "react"; import ReactDOM from "react-dom/client"; 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; }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);