10 اشتباه رایج هنگام استفاده از React

امروزه React به محبوب‌ترین فریمورک فرانت-اند در دنیای فناوری تبدیل شده است که توسط شرکت‌های بزرگی مانند فیسبوک، نتفلیکس و بسیاری دیگر مورد استفاده قرار می‌گیرد. توسعه دهندگان ری‌اکت تقاضای زیادی دارند و این روند همچنان در حال رشد است. در این مقاله قصد داریم 10 اشتباه رایج که توسعه دهندگان React انجام می‌دهند را بررسی کرده و نحوه جلوگیری از آنها را به شما آموزش دهیم.

1. عدم ایجاد کامپوننت‌های کافی

یکی از اشتباهات رایجی که توسعه دهندگان React مرتکب می‌شوند این است که کامپوننت‌های کافی ایجاد نمی‌کنند. با React می‌توانید کامپوننت‌های بزرگی بسازید که بسیاری از کارها را انجام می‌دهند، اما بهتر است این کامپوننت‌ها کوچک در نظر گرفته شوند به طوری که هر کامپوننت مربوط به یک تابع باشد. این نه تنها باعث صرفه جویی در وقت شما می‌شود، بلکه به شما در رفع سریع اشکالات نیز کمک می‌کند، زیرا می‌دانید کدام خطا مربوط به کدام کامپوننت است.

بیایید نگاهی به مثالی از کامپوننت TodoList بیندازیم:

// ./components/TodoList.js

import React from 'react';

import { useTodoList } from '../hooks/useTodoList';
import { useQuery } from '../hooks/useQuery';
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';

const TodoList = () => {
  const { getQuery, setQuery } = useQuery();
  const todos = useTodoList();
  return (
    <div>
      <ul>
        {todos.map(({ id, title, completed }) => (
          <TodoItem key={id} id={id} title={title} completed={completed} />
        ))}
        <NewTodo />
      </ul>
      <div>
        Highlight Query for incomplete items:
        <input value={getQuery()} onChange={e => setQuery(e.target.value)} />
      </div>
    </div>
  );
};

export default TodoList;

2. تغییر مستقیم state

در ری‌اکت هر state باید تغییرناپذیر باشد. اگر مستقیما state را اصلاح کنید، مشکلات عملکردی به وجود می‌آید که رفع آنها دشوار است.

بیایید مثال زیر را بررسی کنیم:

const modifyPetsList = (element, id) => {
  petsList[id].checked = element.target.checked;
  setPetsList(petsList);
};

شما می‌خواهید یک شی را در یک آرایه بر اساس state چک باکس به روز کنید، اما یک مشکل وجود دارد. react نمی‌تواند رندر مجدد را مشاهده و تریگر کند، زیرا شی با همان رفرنس شروع به تغییر می‌کند.

برای رفع این مشکل می‌توانید از متد ()setState یا از هوک ()useState استفاده کنید. هر یک از این متدها اطمینان می‌دهد که تغییرات شما توسط ری‌اکت تأیید شده و DOM شما مجددا به درستی رندر می‌شود.

بیایید مثال قبلی را دوباره بنویسیم و این بار از متد ()useState استفاده کنیم.

توجه: برای جلوگیری از پریدن سایر مقادیر state، می‌توانید از map() و spread syntax نیز استفاده کنید.

const modifyPetsList = (element, id) => {
  const { checked } = element.target;
  setpetsList((pets) => {
    return pets.map((pet, index) => {
      if (id === index) {
        pet = { ...pet, checked };
      }
      return pet;
    });
  });
};

3. انتقال یک عدد به عنوان رشته هنگام عبور از propها

منتقل کردن یک عدد به عنوان رشته هنگام عبور از propها می‌تواند منجر به بروز مشکلاتی در برنامه ری‌اکت شود.

بیایید با یک مثال شروع کنیم:

class Arrival extends React.Component {
  render() {
    return (
      <h1>
        Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .
      </h1>
    );
  }
}

در این مثال، کامپوننت position را به عنوان یک prop در نظر می‌گیرد و اعلام می‌کند که position باید یک عدد باشد. از آنجا که شما یک مقایسه دقیق انجام می‌دهید، هر چیزی که عدد نباشد یا دقیقا برابر با 1 نباشد، عبارت دوم را لحاظ کرده و "last!" را چاپ می‌کند.

برای رفع این مشکل، باید آکلادهایی را به این صورت در ورودی قرار دهید:

const element = <Arrival position={1} />;

4. عدم استفاده از key در کامپوننت لیست

فرض کنیم شما باید لیستی از موارد را ارائه دهید و کد شما شبیه زیر است:

const lists = ['cat', 'dog', 'fish’];

render() {
  return (
    <ul>
      {lists.map(listNo =>
        <li>{listNo}</li>)}
    </ul>
  );
}

اگر با یک برنامه کوچکتر کار می‌کنید، این می‌تواند مفید باشد. اما هنگام کار با لیست‌های بزرگ، زمانی که می‌خواهید موردی را از لیست تغییر دهید یا حذف کنید، با مشکلی در رندر مواجه خواهید شد.

react تمام عناصر لیست موجود در Document Object Model (DOM) را ردیابی می‌کند و بدون آن نمی‌داند چه چیزی در لیست شما تغییر کرده است.

برای رفع این مشکل باید keyها را به همه عناصر لیست خود اضافه کنید. keyها به هر عنصر یک هویت منحصر به فرد می‌دهند که به ری‌اکت کمک می‌کند تا مشخص شود چه مواردی اضافه، حذف و اصلاح شده است.

در زیر نحوه انجام کار آمده است:

<ul>
  {lists.map(listNo =>
    <li key={listNo}>{listNo}</li>)}
</ul>

5. فراموش کردن اینکه setState ناهمزمان است

به راحتی می‌توان فراموش کرد که state در react ناهمزمان است. این چیزی است که حتی باتجربه‌ترین توسعه دهندگان ری‌اکت نیز فراموش می‌کنند.

ناهمزمان بودن به معنای این است که هر تغییری که انجام می‌دهید بلافاصله اعمال نمی‌شود (ممکن است در رندر بعدی اعمال شود). برای بهبود این عملکرد، ری‌اکت فراخوانی‌های به روزرسانی را به صورت خودکار انجام می‌دهد. اگر بلافاصله پس از تنظیم مقدار مورد نظر به آن دسترسی پیدا کنید، ممکن است دقیق ترین نتیجه را نداشته باشید.

بیایید به یک مثال نگاه کنیم:

handlePetsUpdate = (petCount) => {
  this.setState({ petCount });
  this.props.callback(this.state.petCount); // Old value
};

با دادن یک پارامتر دوم اختیاری به ()setState که به عنوان تابع برگشتی عمل می‌کند، می‌توانید این مشکل را برطرف کنید. به این صورت که بعد از به روزرسانی state با تغییرات جدید، تابع برگشتی فراخوانی می‌شود.

handlePetsUpdate = (petCount) => {
  this.setState({ petCount }, () => {
    this.props.callback(this.state.petCount); // Updated value
  });
};

توجه: همین مورد برای ()useState نیز صدق می‌کند، با این تفاوت که آرگومان پاسخ مشابهی با ()setState ندارد. در عوض می‌توانید از هوک ()useEffect استفاده کنید تا همان نتیجه را بگیرید.

6. استفاده بیش از حد از Redux

در برنامه‌های بزرگتر react، بسیاری از توسعه دهندگان از Redux برای مدیریت state گلوبال استفاده می‌کنند. اگرچه Redux مفید است، اما برای مدیریت هر state در برنامه‌های خود نیازی به استفاده از آن ندارید.

اگر برنامه‌ای دارید که هیچ یک از کامپوننت‌های سطح موازی لازم برای تبادل اطلاعات را ندارد، نیازی به افزودن کتابخانه اضافی به پروژه خود ندارید. توصیه می‌شود هنگام استفاده از یک کامپوننت فرم، از متد local state یا useState در Redux استفاده کنید تا بتوانید وضعیت دکمه چک را هر زمان که به آن دسترسی پیدا شد، بررسی کنید.

7. ایجاد و استفاده از کامپوننت‌های God

کامپوننت‌های God یکپارچه هستند و قابل استفاده مجدد نیستند. در react از آنها به عنوان "ضد الگو" یاد می‌شود. بنابراین شما نباید یک صفحه کامل با تمام عناصر رابط کاربری خود را در یک کامپوننت ایجاد کنید. بلکه باید وقت بگذارید و قسمت‌های مختلف به هم پیوسته برنامه خود را مشخص کنید و آنها را به کامپوننت‌های مختلف تقسیم کنید. وقتی کامپوننت‌ها را از این طریق جدا می‌کنید، در نتیجه نگهداری و بازسازی کلیه قسمت‌های برنامه آسان‌تر می‌شود.

8- پیروی نکردن از ساختار پوشه ReactJS

پروژه‌هایی که ایجاد می‌کنید فقط برای توسعه فعلی ساخته نشده اند و به احتمال زیاد در آینده نیاز به نگهداری یا دستکاری خواهند داشت. هنگام در نظر گرفتن امکانات آینده یک پروژه، ساختاربندی پوشه بسیار مهم است.

بیایید نگاهی بیاندازیم به یک ساختار پوشه استاندارد که توسط انجمن ReactJS دنبال می‌شود:

هنگام جستجوی هر پروژه موجود، داشتن مکان‌های جداگانه برای کانتینرها، assetها و کامپوننت‌ها مفید است. همچنین پیروی از قراردادهای نام گذاری برای کمک به خوانایی و سازماندهی کد نیز اهمیت دارد. این به شما کمک می‌کند تا به راحتی هدف هر کدی را که در پروژه‌های شما نوشته شده است، شناسایی کنید.

9. ارسال propها به عنوان رشته (به جای عدد)

توسعه دهندگان ری‌اکت با تجربه نوشتن HTML بسیار زیاد، نوشتن چیزی شبیه به این را طبیعی می‌دانند:

<MyComponent value=”4” />

این مقدار prop در واقع به عنوان یک رشته به MyComponent ارسال می‌شود. اگر به عنوان عدد به آن نیاز دارید، می‌توانید با استفاده از چیزی مانند تابع ()parseInt یا قرار دادن آکلاد به جای علامت‌های نقل قول، این مشکل را برطرف کنید.

<MyComponent value={4} />

10. فراموش کردن شروع نام کامپوننت با یک حرف بزرگ

فراموش کردن شروع نام کامپوننت‌ها با حروف بزرگ یک اشتباه ناچیزی است که رعایت آن بسیار آسان است. در JSX کامپوننتی که با حرف کوچک شروع می‌شود، در یک عنصر HTML کامپایل می‌گردد.

فرض کنیم شما چیزی شبیه به این نوشتید:

class demoComponentName extends React.Component {
}

این کد خطایی ایجاد می‌کند که به شما می‌گوید اگر قصد رندر یک کامپوننت ری‌اکت را دارید، باید نام آن را با یک حرف بزرگ شروع کنید.

این اشتباه یک راه حل آسان دارد و آن شروع شدن نام کامپوننت با حروف بزرگ مانند زیر است:

class DemoComponentName extends React.Component {
}

چه چیزهای دیگری را باید در آینده یاد بگیریم

اکنون که ده اشتباه رایج را که توسعه دهندگان ری‌اکت مرتکب می‌شوند بررسی کردیم، وقت آن است که کار با react و استفاده از مهارت‌هایی را که امروز در اینجا آموخته اید، شروع کنیم. تقاضا برای توسعه دهندگان ری‌اکت بسیار زیاد است، بنابراین افزودن ری‌اکت به مهارت‌های خود یک سرمایه گذاری شغلی عاقلانه محسوب می‌شود.

برخی از مفاهیم توصیه شده برای شروع عبارتند از:

• کار با کتابخانه‌ها
• پیاده سازی Firebase
• توسعه برنامه با گلوبال استیت
• و موارد دیگر

برای داشتن تجربه عملی با این مفاهیم و آموختن نحوه شروع کار با ری‌اکت این آموزش را حتما ببینید. اگر از قبل تجربه کار با جاوااسکریپت را دارید و می‌خواهید ری‌اکت را به مهارت‌های خود اضافه کنید، این مسیر یادگیری برای شما مناسب است. همچنین اصول ری‌اکت و استفاده از الگوهای طراحی هنگام ایجاد برنامه‌ها، همه با تمرینات برنامه نویسی به صورت عملی و پروژه محور را پوشش خواهد داد.

منبع