Tiếng Việt

Hướng dẫn ReactJS

Hooks

Chức năng nâng cao của ReactJS

Khái niệm bổ sung

ReactJS - API Trình phân tích: Hướng dẫn dành cho người mới bắt đầu về Tối ưu hóa Hiệu suất

Xin chào các pháp sư React tương lai! Hôm nay, chúng ta sẽ lặn sâu vào thế giới kỳ diệu của API Trình phân tích (Profiler API) của React. Đừng lo lắng nếu bạn mới làm quen với lập trình - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình này, và chúng ta sẽ cùng nhau bước từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có khả năng tối ưu hóa các ứng dụng React của mình như một chuyên gia!

ReactJS - Profiler API

API Trình phân tích là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu xem API Trình phân tích là gì. Hãy tưởng tượng bạn đang nướng bánh, và bạn muốn biết bước nào mất nhiều thời gian nhất. API Trình phân tích giống như một kronometre cho các thành phần React của bạn, giúp bạn xác định phần nào của ứng dụng có thể làm chậm ứng dụng của bạn.

Thành phần Trình phân tích

Tại trái tim của API Trình phân tích là thành phần Profiler. Đây là một thành phần đặc biệt bao quanh các phần của ứng dụng bạn muốn đo lường.

Cách sử dụng cơ bản

Hãy bắt đầu với một ví dụ đơn giản:

import React, { Profiler } from 'react';

function MyApp() {
return (
<Profiler id="MyApp" onRender={onRenderCallback}>
<div>
<h1>Xin chào đến với ứng dụng của tôi!</h1>
<p Đây là một ứng dụng mẫu.</p>
</div>
</Profiler>
);
}

function onRenderCallback(
id, // thuộc tính "id" của cây Trình phân tích vừa cam kết
phase, // hoặc "mount" (nếu cây vừa được gắn) hoặc "update" (nếu nó được vẽ lại)
actualDuration, // thời gian thực tế đã dành để vẽ lại bản cập nhật cam kết
baseDuration, // ước tính thời gian để vẽ lại toàn bộ cây con mà không có bộ nhớ cache
startTime, // khi React bắt đầu vẽ lại bản cập nhật này
commitTime, // khi React cam kết bản cập nhật này
interactions // bộ.HashSet các tương tác thuộc về bản cập nhật này
) {
// Ghi lại hoặc gửi thông tin này đến dịch vụ theo dõi hiệu suất ưa thích của bạn
console.log(`Vẽ ${id} mất ${actualDuration}ms`);
}

Trong ví dụ này, chúng ta đang bao quanh toàn bộ ứng dụng của mình với một thành phần Profiler. Thuộc tính onRender là một hàm callback mà React sẽ gọi mỗi khi cây thành phần được phân tích "cam kết" một bản cập nhật.

Hiểu rõ các tham số của hàm callback

Hãy phân tích ý nghĩa của mỗi tham số trong hàm onRenderCallback:

  1. id: Đây giống như một thẻ tên cho Trình phân tích của bạn. Nó giúp bạn nhận diện phần nào của ứng dụng bạn đang đo lường.
  2. phase: Điều này cho bạn biết nếu thành phần đang được gắn lần đầu hoặc đang được cập nhật.
  3. actualDuration: Đây là thời gian thực tế để vẽ lại các thay đổi.
  4. baseDuration: Đây là ước tính thời gian sẽ mất để vẽ lại toàn bộ cây con mà không có bộ nhớ cache.
  5. startTime và commitTime: Những cái này cho bạn biết khi React bắt đầu và kết thúc việc vẽ lại.
  6. interactions: Điều này để theo dõi các tương tác cụ thể của người dùng đã kích hoạt bản vẽ.

Áp dụng Trình phân tích trong các tình huống thực tế

Bây giờ chúng ta đã hiểu các nguyên tắc cơ bản, hãy xem cách chúng ta có thể sử dụng Trình phân tích trong một tình huống thực tế hơn.

Phân tích các thành phần cụ thể

Hãy tưởng tượng chúng ta có một ứng dụng danh sách công việc, và chúng ta muốn phân tích việc vẽ danh sách:

import React, { Profiler, useState } from 'react';

function TodoList({ todos }) {
return (
<Profiler id="TodoList" onRender={onRenderCallback}>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</Profiler>
);
}

function TodoApp() {
const [todos, setTodos] = useState([
{ id: 1, text: 'Học React' },
{ id: 2, text: 'Xây dựng các ứng dụng tuyệt vời' }
]);

return (
<div>
<h1>Danh sách công việc của tôi</h1>
<TodoList todos={todos} />
<button onClick={() => setTodos([...todos, { id: Date.now(), text: 'Công việc mới' }])}>
Thêm công việc
</button>
</div>
);
}

Trong ví dụ này, chúng ta đang cụ thể phân tích thành phần TodoList. Điều này cho phép chúng ta đo lường thời gian để vẽ danh sách các công việc, điều này có thể hữu ích nếu chúng ta có một số lượng lớn các mục.

Trình phân tích嵌套

Bạn cũng có thể sử dụng các Trình phân tích嵌套 để có được các phép đo chi tiết hơn:

function ComplexComponent() {
return (
<Profiler id="ComplexComponent" onRender={onRenderCallback}>
<div>
<Profiler id="Header" onRender={onRenderCallback}>
<Header />
</Profiler>
<Profiler id="Content" onRender={onRenderCallback}>
<Content />
</Profiler>
<Profiler id="Footer" onRender={onRenderCallback}>
<Footer />
</Profiler>
</div>
</Profiler>
);
}

Thiết lập này cho phép bạn đo lường hiệu suất của toàn bộ ComplexComponent cũng như các phần riêng lẻ của nó.

Trình phân tích React DevTools

Trong khi việc ghi lại trên console rất tốt cho phát triển, React DevTools cung cấp một cách tiếp cận trực quan và tương tác hơn để làm việc với Trình phân tích.

Sử dụng Trình phân tích trong React DevTools

  1. Cài đặt tiện ích mở rộng React DevTools cho trình duyệt.
  2. Mở ứng dụng của bạn trong trình duyệt và mở công cụ phát triển.
  3. Chuyển sang tab "Profiler" trong React DevTools.
  4. Nhấn nút "Record" để bắt đầu phân tích.
  5. Tương tác với ứng dụng của bạn.
  6. Dừng việc ghi lại và phân tích kết quả.

Trình phân tích DevTools cung cấp một biểu đồ hình nến của các thành phần vẽ lại, giúp bạn dễ dàng phát hiện các điểm nghẽn hiệu suất.

Giải thích kết quả

Trong Trình phân tích DevTools, bạn sẽ thấy:

  • Các thanh màu đại diện cho các thành phần vẽ lại
  • Chiều rộng của mỗi thanh cho biết thời gian vẽ lại
  • Khi rê chuột qua một thanh, nó sẽ hiển thị thông tin chi tiết về thời gian

Tìm kiếm các thành phần vẽ lại thường xuyên hoặc mất nhiều thời gian để vẽ lại. Đây là những ứng cử viên hàng đầu cho việc tối ưu hóa.

Kỹ thuật Tối ưu hóa

Bây giờ chúng ta có thể xác định các thành phần chậm, chúng ta có thể làm gì về chúng? Dưới đây là một số kỹ thuật tối ưu hóa phổ biến:

  1. Bộ nhớ cache: Sử dụng React.memo cho các thành phần hàm hoặc shouldComponentUpdate cho các thành phần lớp để ngăn chặn các bản vẽ lại không cần thiết.

  2. Chia nhỏ mã: Sử dụng React.lazy và Suspense để tải các thành phần chỉ khi cần.

  3. Virtualization: Đối với các danh sách dài, sử dụng thư viện như react-window để chỉ vẽ các mục hiển thị.

  4. Debouncing và Throttling: Đối với dữ liệu thay đổi thường xuyên, sử dụng các kỹ thuật này để giới hạn tần suất cập nhật.

Dưới đây là một ví dụ nhanh về bộ nhớ cache:

import React, { memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
// Logic vẽ lại tốn kém ở đây
return <div>{/* Nội dung vẽ lại */}</div>;
});

Kết luận

Chúc mừng! Bạn đã chính thức bước vào thế giới tối ưu hóa hiệu suất của React. Nhớ rằng API Trình phân tích là một công cụ mạnh mẽ, nhưng nó không phải là để tối ưu hóa mọi thứ. Hãy tập trung vào các phần của ứng dụng thực sự cần cải thiện.

Trong hành trình React của bạn, hãy tiếp tục thử nghiệm với Trình phân tích. Nó giống như một siêu năng lực giúp bạn tạo ra các ứng dụng nhanh hơn và hiệu quả hơn. Và biết đâu, có lẽ một ngày nào đó bạn sẽ là người dạy người khác về các kỹ thuật tối ưu hóa React tiên tiến!

Chúc bạn lập trình vui vẻ, và hy vọng các thành phần của bạn luôn vẽ lại nhanh chóng!

Credits: Image by storyset

Hướng Dẫn Trước:
ReactJS - Tối ưu hóa hiệu suất
Hướng Dẫn Tiếp Theo:
ReactJS - Cổng