Hướng Dẫn Tối Ưu Hóa Hiệu Suất Ứng Dụng React từ A đến Z
Trong thế giới phát triển phần mềm hiện nay, React đã trở thành một trong những thư viện phổ biến nhất để xây dựng giao diện người dùng. Rất nhiều lập trình viên đang tận dụng sức mạnh mà React mang lại trong công việc hàng ngày. Tuy nhiên, không phải ai cũng biết cách tối ưu hóa ứng dụng React của mình để đạt hiệu suất làm việc tối đa. Hãy cùng tìm hiểu một số kỹ thuật tối ưu hóa hiệu suất ứng dụng React nhé!
1. Tối Ưu Hóa Các Danh Sách Lớn
Tối ưu hóa danh sách (List) là một trong những vấn đề thường gặp nhất trong React. Danh sách lớn có thể chiếm dụng nhiều bộ nhớ và làm chậm hiệu suất ứng dụng. Do vậy, việc sử dụng kỹ thuật ảo hóa (virtualization) là cần thiết, giúp hiển thị chỉ những mục cần thiết thay vì tất cả các mục trong danh sách.
Các thư viện phổ biến như React Window và React Virtualized cho phép chỉ hiển thị các mục trong chế độ xem, từ đó giảm số lượng nút DOM và cải thiện hiệu suất của ứng dụng. Dưới đây là một ví dụ sử dụng React Window:
javascript
import { FixedSizeList as List } from 'react-window';
const MyList = ({ items }) => (
<List
height={500} // Chiều cao của container
itemCount={items.length} // Tổng số mục
itemSize={35} // Chiều cao mỗi mục
width={300} // Chiều rộng của container
>
{({ index, style }) => (
<div style={style}>
{items[index]}
</div>
)}
</List>
);2. Sử Dụng Hàm useMemo
Hàm useMemo là một hook quan trọng giúp tối ưu hóa hiệu suất bằng cách ghi nhớ kết quả của các phép tính tốn kém. Khi sử dụng useMemo, bạn sẽ không phải tính toán lại giá trị nếu không có sự thay đổi về điều kiện.
Cú pháp sử dụng useMemo như sau:
javascript
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);Dưới đây là một ví dụ sử dụng useMemo:
javascript
import React, { useState, useMemo } from 'react';
const ExpensiveComponent = ({ a, b }) => {
const computeExpensiveValue = (a, b) => {
console.log('Computing expensive value...');
return a + b;
};
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return (
<div>
<p>Giá Trị Được Tính Toán: {memoizedValue}</p>
</div>
);
};
const ParentComponent = () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
const [count, setCount] = useState(0);
return (
<div>
<ExpensiveComponent a={a} b={b} />
<button onClick={() => setCount(count + 1)}>Tăng Số Đếm</button>
</div>
);
};3. Phân Tách Mã (Code Splitting)
Trong các ứng dụng React truyền thống, toàn bộ mã nguồn thường được đóng gói thành một tệp duy nhất, dẫn đến thời gian tải lâu. Kỹ thuật phân tách mã giúp chia nhỏ ứng dụng thành nhiều phần nhỏ hơn, giúp cải thiện tốc độ tải và hiệu suất tổng thể. Dưới đây là một ví dụ:
javascript
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(null);
const loadComponent = async () => {
const { default: LoadedComponent } = await import('./MyComponent');
setComponent(<LoadedComponent />);
};
return (
<div>
<h1>Ví Dụ Phân Tách Mã</h1>
<button onClick={loadComponent}>Tải Thành Phần</button>
{component}
</div>
);
}
export default App;4. Tải Lazy với React (Lazy Loading)
React.Lazy cho phép bạn tải các thành phần một cách chậm rãi. Điều này có nghĩa là thành phần sẽ chỉ được tải khi cần thiết, giúp tiết kiệm b bandwidth. Bạn có thể sử dụng React.lazy() để nhập một thành phần động, từ đó tải không đồng bộ khi cần.
Ví dụ về Lazy Load:
javascript
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./MyComponent'));
const App = () => {
return (
<div>
<h1>Ứng Dụng Của Tôi</h1>
<Suspense fallback={<div>Đang Tải...</div>}>
<LazyComponent />
</Suspense>
</div>
);
};
export default App;5. Throttling và Debouncing
Throttling là kỹ thuật giúp giới hạn tần suất thực thi một hàm. Hàm được throttling chỉ được gọi một lần trong một khoảng thời gian nhất định, giúp cải thiện hiệu suất ứng dụng khi có sự kiện kích hoạt liên tục. Ngược lại, debouncing giới hạn việc thực thi một hàm cho đến khi không có sự kiện xảy ra trong khoảng thời gian chỉ định.
Ví Dụ về Throttling:
javascript
import React, { useState } from 'react';
function ThrottledButton() {
const [count, setCount] = useState(0);
const throttle = (func, delay) => {
let lastCall = 0;
return () => {
const now = new Date().getTime();
if (now - lastCall >= delay) {
lastCall = now;
func();
}
};
};
const incrementCount = () => {
setCount((prevCount) => prevCount + 1);
};
const throttledIncrement = throttle(incrementCount, 2000);
return (
<div>
<h1>Đếm: {count}</h1>
<button onClick={throttledIncrement}>Nhấn Người</button>
</div>
);
}
export default ThrottledButton;Ví Dụ về Debouncing:
javascript
import React, { useState } from 'react';
function debounce(func, delay) {
let timeoutId;
return function (...args) {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
func(...args);
}, delay);
};
}
const DebouncedSearch = () => {
const [query, setQuery] = useState('');
const handleSearch = (event) => {
setQuery(event.target.value);
console.log('Đang Tìm Kiếm:', event.target.value);
};
const debouncedSearch = debounce(handleSearch, 500);
return (
<div>
<h1>Tìm Kiếm</h1>
<input
type="text"
placeholder="Gõ để tìm..."
onChange={debouncedSearch}
/>
<p>Câu Hỏi Tìm Kiếm: {query}</p>
</div>
);
};
export default DebouncedSearch;Kết Luận
Việc tối ưu hóa hiệu suất cho các ứng dụng React là cực kỳ quan trọng, giúp chúng chạy trơn tru và hiệu quả, đặc biệt khi ứng dụng ngày càng trở nên phức tạp. Bằng cách áp dụng các kỹ thuật như ảo hóa danh sách, ghi nhớ với useMemo, phân tách mã, tải lazy, throttling và debouncing, bạn có thể cải thiện đáng kể hiệu suất ứng dụng của mình.
Hy vọng rằng những kỹ thuật này sẽ hữu ích trong quá trình tối ưu hóa ứng dụng React của bạn. Cảm ơn bạn đã theo dõi bài viết này!
source: viblo
