<Profiler>

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

• Tham khảo
  • <Profiler>
  • onRender callback
• Cách sử dụng
  • Đo hiệu suất render bằng cách lập trình
  • Đo hiệu suất các phần khác nhau của ứng dụng

Tham khảo

<Profiler>

Hãy bọc các component bên trong <Profiler> để đo lường hiệu suất.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Props

• id: Một chuỗi ký tự để xác định phần giao diện mà bạn muốn đo lường hiệu suất.
• onRender: Một callback onRender mà React sẽ gọi mỗi khi các component bên trong tree cập nhật. Nó sẽ nhận lại thông tin về những gì đã được render và mất bao nhiêu thời gian để render chúng.

Những điều cần chú ý

• Việc đo lường sẽ làm giảm hiệu suất, vì vậy mặc định nó sẽ luôn được vô hiệu hoá trong bản build production. Để đo lường ở production, bạn cần kích hoạt tính năng đo lường trong một bản build production đặc biệt.

onRender callback

React sẽ gọi callback onRender với thông tin về những gì được render.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggregate or log render timings...
}

Các tham số

• id: Chuỗi id là prop của <Profiler> tree được thực thi (commit). Điều này cho phép bạn xác định phần nào của tree đã được thực thi nếu bạn đang sử dụng nhiều trình đo hiệu năng.
• phase: "mount", "update" hoặc "nested-update". Chúng giúp bạn biết liệu tree đã được render lần đầu tiên hay đã được render lại do thay đổi trong props, state hoặc hooks.
• actualDuration: Số mili giây dành cho việc render <Profiler> và các phần tử con phục vụ cho cập nhật hiện tại. Nó giúp cho thấy subtree tận dụng tốt việc ghi nhớ (memorization) (ví dụ như memo và useMemo). Lý tưởng nhất là giá trị này sẽ giảm đáng kể sau lần render ban đầu vì nhiều component con chỉ cần được render lại nếu props cụ thể của chúng thay đổi.
• baseDuration: Số mili giây ước tính thời gian cần để render lại toàn bộ subtree của <Profiler> mà không cần tối ưu. Giá trị này được tính bằng cách tính tổng thời gian render gần đây nhất của các component trong tree. Nó sẽ giúp ước tính được thời gian chậm nhất (ví dụ lần render ban đầu hay một tree mà không có sự ghi nhớ nào). Hãy so sánh actualDuration với nó để xem việc ghi nhớ có hoạt động chính xác hay không.
• startTime: Mốc thời gian mà React bắt đầu thực hiện việc render cho cập nhật hiện tại.
• endTime: Mốc thời gian React thực hiện xong cập nhật hiện tại. Giá trị này được chia sẻ giữa tất cả các profiler trong một lần thực thi, cho phép nhóm chúng lại nếu cần thiết.

Cách sử dụng

Đo hiệu suất render bằng cách lập trình

Bọc <Profiler> vào một React tree để đo lường hiệu suất render.

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

Nó yêu cầu 2 props: một chuỗi id và một callback onRender mà React gọi bất cứ khi nào một component trong tree cập nhật.

Đo hiệu suất các phần khác nhau của ứng dụng

Bạn có thể sử dụng nhiều <Profiler> để đo lường nhiều phần khác nhau của ứng dụng:

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content />
  </Profiler>
</App>

Bạn cũng có thể lồng nhiều <Profiler> vào với nhau:

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

Mặc dù <Profiler> là một component rất nhẹ, nó chỉ nên được dùng khi cần thiết. Mỗi lần sử dụng sẽ đều tiêu hao CPU và tốn thêm bộ nhớ cho ứng dụng.