آموزش دیباگ کردن کامپوننت‌های React با React Developer Tools

مقدمه

وقتی روی پروژه‌های React کار می‌کنید، دیر یا زود به موقعیتی می‌رسید که باید بفهمید چرا یک کامپوننت به درستی رندر نمی‌شود، چرا State تغییر نمی‌کند یا چه Propsهایی به یک کامپوننت ارسال شده‌اند. برای این کار، React Developer Tools یکی از بهترین ابزارهایی است که می‌توانید در اختیار داشته باشید.

این افزونه که توسط تیم React توسعه داده شده، به شما امکان می‌دهد ساختار کامپوننت‌ها، Props، State و Hookها را مستقیماً از داخل مرورگر بررسی و دیباگ کنید.

در این آموزش با React Developer Tools آشنا می‌شویم و یاد می‌گیریم چگونه از آن برای عیب‌یابی کامپوننت‌های React استفاده کنیم.

پیش‌نیازها

برای دنبال کردن این آموزش به موارد زیر نیاز دارید:

• آشنایی اولیه با React
• نصب Node.js و npm
• یک پروژه React
• مرورگر Google Chrome یا Firefox

React Developer Tools چیست؟

React Developer Tools یک افزونه مرورگر است که به شما اجازه می‌دهد:

• ساختار درختی کامپوننت‌های React را مشاهده کنید.
• مقدار Props و State را بررسی کنید.
• Hookها را مشاهده کنید.
• تغییرات کامپوننت‌ها را هنگام رندر دنبال کنید.
• عملکرد (Performance) برنامه را تحلیل کنید.

نصب React Developer Tools

برای Google Chrome

از فروشگاه افزونه‌های کروم، افزونه React Developer Tools را نصب کنید.

برای Firefox

نسخه Firefox نیز از طریق فروشگاه افزونه‌های موزیلا در دسترس است.

پس از نصب، مرورگر را ری‌استارت کنید.

ایجاد یک پروژه نمونه React

ابتدا یک پروژه جدید ایجاد کنید:

npx create-react-app react-devtools-demo
cd react-devtools-demo
npm start

سپس فایل App.js را به شکل زیر تغییر دهید:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>

      <button
        onClick={() => setCount(count + 1)}
      >
        افزایش
      </button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h1>React Developer Tools Demo</h1>
      <Counter />
    </div>
  );
}

باز کردن React Developer Tools

بعد از اجرای برنامه:

1. صفحه را در مرورگر باز کنید.
2. روی صفحه راست کلیک کرده و Inspect را انتخاب کنید.
3. وارد Developer Tools شوید.
4. تب‌های جدیدی با نام‌های Components و Profiler مشاهده خواهید کرد.

این تب‌ها توسط React Developer Tools اضافه می‌شوند.

بررسی درخت کامپوننت‌ها

در تب Components تمام کامپوننت‌های React نمایش داده می‌شوند:

App
 └─ Counter

با انتخاب هر کامپوننت می‌توانید اطلاعات آن را مشاهده کنید.

مثلاً با انتخاب Counter موارد زیر نمایش داده می‌شوند:

• Props
• State
• Hooks

مشاهده State کامپوننت

در مثال بالا مقدار State به صورت زیر نمایش داده می‌شود:

Hooks
 └─ State: 0

اگر روی دکمه «افزایش» کلیک کنید:

Hooks
 └─ State: 1

مقدار State به‌صورت زنده بروزرسانی می‌شود.

تغییر State از داخل DevTools

یکی از قابلیت‌های جذاب React Developer Tools این است که می‌توانید مقدار State را مستقیماً تغییر دهید.

برای مثال:

State: 1

را به:

State: 100

تغییر دهید.

بلافاصله رابط کاربری نیز مقدار جدید را نمایش می‌دهد.

مشاهده Props

فرض کنید کامپوننت خود را به شکل زیر تغییر دهید:

function Counter({ initialValue }) {
  const [count, setCount] =
    useState(initialValue);

  return (
    <h2>{count}</h2>
  );
}

و:

<Counter initialValue={5} />

در DevTools خواهید دید:

Props
 └─ initialValue: 5

این قابلیت هنگام عیب‌یابی انتقال داده بین کامپوننت‌ها بسیار مفید است.

جستجوی کامپوننت‌ها

در پروژه‌های بزرگ ممکن است صدها کامپوننت وجود داشته باشد.

در بالای تب Components یک فیلد جستجو وجود دارد که می‌توانید نام کامپوننت موردنظر را وارد کنید:

Search Components...

مثلاً:

Counter

هایلایت شدن کامپوننت هنگام انتخاب

در تنظیمات React Developer Tools گزینه‌ای با عنوان:

Highlight updates

وجود دارد.

با فعال کردن آن، هر بار که یک کامپوننت مجدداً رندر شود، روی صفحه هایلایت خواهد شد.

این قابلیت برای شناسایی رندرهای غیرضروری بسیار مفید است.

بررسی Hookها

React Developer Tools می‌تواند Hookهای استفاده‌شده در هر کامپوننت را نمایش دهد.

مثال:

const [count, setCount] =
  useState(0);

در DevTools:

Hooks
 └─ State: 0

و برای Hookهای پیچیده‌تر:

const [user, setUser] =
  useState(null);

const [loading, setLoading] =
  useState(false);

نمایش داده می‌شود:

Hooks
 ├─ State: null
 └─ State: false

استفاده از Profiler

تب Profiler برای تحلیل عملکرد برنامه استفاده می‌شود.

این ابزار به شما کمک می‌کند:

• کامپوننت‌های کند را پیدا کنید.
• مدت زمان رندر هر کامپوننت را مشاهده کنید.
• رندرهای غیرضروری را شناسایی کنید.

شروع پروفایل‌گیری

در تب Profiler:

1. روی Record کلیک کنید.
2. با برنامه تعامل داشته باشید.
3. روی Stop کلیک کنید.

React اطلاعات عملکرد را نمایش خواهد داد.

پیدا کردن رندرهای غیرضروری

فرض کنید کامپوننتی بدون نیاز چندین بار رندر می‌شود.

Profiler به شما نشان می‌دهد:

Counter rendered 12 times

در چنین شرایطی می‌توانید از:

React.memo()

یا:

useMemo()

و

useCallback()

استفاده کنید.

پیدا کردن کامپوننت از روی صفحه

یکی از امکانات کاربردی DevTools انتخاب مستقیم عناصر صفحه است.

روی آیکون انتخاب کامپوننت کلیک کنید:

Select an element

سپس روی یک عنصر در صفحه کلیک کنید.

React Developer Tools مستقیماً کامپوننت مربوط به آن عنصر را پیدا می‌کند.

نکات مهم

• React Developer Tools فقط در محیط توسعه (Development) بیشترین اطلاعات را نمایش می‌دهد.
• در نسخه Production ممکن است برخی اطلاعات محدود شوند.
• برای پروژه‌های بزرگ، استفاده از Profiler می‌تواند مشکلات عملکردی را سریع‌تر شناسایی کند.
• هنگام استفاده از Hookها، DevTools بهترین راه برای مشاهده مقادیر لحظه‌ای آن‌هاست.

جمع‌بندی

React Developer Tools یکی از ضروری‌ترین ابزارها برای توسعه‌دهندگان React است. با استفاده از این ابزار می‌توانید:

• ساختار کامپوننت‌ها را مشاهده کنید.
• Props و State را بررسی کنید.
• Hookها را مشاهده و ویرایش کنید.
• رندرهای غیرضروری را شناسایی کنید.
• عملکرد برنامه را با Profiler تحلیل کنید.

اگر به‌صورت جدی با React کار می‌کنید، تسلط بر React Developer Tools سرعت توسعه و عیب‌یابی پروژه‌ها را به شکل چشمگیری افزایش می‌دهد.

از همراهی شما با پارمین کلود سپاسگزاریم.