در این مقاله چند نکته در اختیار شما خواهیم گذاشت که به شما کمک می کند که یک توسعه دهنده ی بهتر در React شوید.

React ساخت UI (رابط) های تعاملی را آسان تر می کند. View های ساده برای هر state در اپلیکیشن خود طراحی کنید زمانی که داده های شما تغییر می کند React بطور کارآمدی کامپوننت های مربوط را بروزرسانی و رندر می کند.

اجازه دهید درباره ی Linting (خطایابی) صحبت کنیم

یکی از مواردی که در نوشتن کد بهتر واقعا ضروری می باشد یک Linting است. زیرا یک مجموعه ی خوب از قوانین linting به ویرایشگر کد شما کمک می کند تا جلوی هرچیزی که احتمالا باعث خطا در کد شما می شود را بگیرید.

علاوه بر جلوگیری از مشکلات، تنظیمات ES Lint شما بطور دائم شما را از بهترین عملیات های React آگاه می کند.

import react from 'react';
/* Other imports */

/* Code */

export default class App extends React.Component {
  render() {
    const {userIsLoaded, user} = this.props;
    if (!userIsLoaded) return <Loader />;
    
    return (
      /* Code */
    )
  }
}

قطعه کد بالا را بردارید. این کد می گوید که شما به یک property جدید به نام this.props.hello در تابع render() ارجاع می دهید. Linter شما به سرعت قرمز می شود و می گوید:

'hello' is missing in props validation (react/prop-types)

Linting شما را از بهترین اقدامات در React آگاه می کند و درک شما از کد را شکل می دهد به این ترتیب شما به زودی از اشتباه کردن زمان کدزنی پرهیز خواهید کرد.

شما حتی می توانید سراغ ESLint بروید و مجموعه ای از امکانات linting برای جاوااسکریپت را تنظیم کنید یا می توانید از راهنمای استایل جاوااسکریپت Airbnb استفاده کنید و همچنین می توانید React ESLint Package را نصب کنید.

propType ها و defaultProp ها

در قسمت قبل درباره ی عملکرد linter صحبت کردیم ، وقتی یک ورودی اعتبارسنجی نشده را ارسال کنیم ، از آن استفاده کردیم.

static propTypes = {
  userIsLoaded: PropTypes.boolean.isRequired,
  user: PropTypes.shape({
    _id: PropTypes.string,
  )}.isRequired,
}

در اینجا اگر بگوییم userIsLoaded الزامی نیست، نیاز داریم که کد زیر را به به پروژه ی خود اضافه کنیم.

static defaultProps = {
 userIsLoaded: false,
}

بنابراین هرزمان که یک PropType داریم که در کامپوننت ها استفاده شده است نیاز داریم که یک propType برای آن تنظیم کنیم. همانطور که در ادامه می بینید نیاز داریم به React بگوییم که userIsLoaded همیشه مقدار Boolean دارد.

و دوباره اگر بگوییم که userIsLoaded الزامی نیست نیاز داریم که یک prop پیش فرض داشته باشیم و اگر الزامی باشد نیاز به تعریف یک prop پیش فرض برای این کار نداریم اما قانون می گوید که یک propTypes مبهم نظیر یک آبجکت یا آرایه نباید داشته باشید.

به همین دلیل است که ما از shape برای اعتبارسنجی user استفاده می کنیم که یک id درون خود دارد که یک propType از string است و شیئ user نیز بطور کامل مورد نیاز است.

اطمینان حاصل کنید که propType ها و defaultProp ها را برای هر کامپوننتی که از prop ها استفاده می کند، تنظیم کرده اید.

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

توجه

برخلاف نسخه های قبلی React دیگر proptype ها در React وجود ندارند و باید آن را به صورت جداگانه به عنوان یک وابستگی (dependency) در پروژه ی خود اضافه کنید.

بدانید چه زمانی باید یک کامپوننت جدید بسازید

export default class Profile extends PureComponent {
  static propTypes = {
    userIsLoaded: PropTypes.bool,
    user: PropTypes.shape({
      _id: PropTypes.string,
    }).isRequired,
  }

  static defaultProps = {
    userIsLoaded: false,
  }

  render() {
    const { userIsLoaded, user } = this.props;
    if (!userIsLoaded) return <Loaded />;
    return (
      <div>
        <div className="two-col">
          <section>
            <MyOrders userId={user.id} />
            <My Downloads userId={user._id} />
          </section>
          <aside>
            <MySubscriptions user={user} />
            <MyVotes user={user} />
          </aside>
        </div>
        <div className="one-col">
          {isRole('affiliate', user={user._id} &&
            <MyAffiliateInfo userId={user._id} />
          }
        </div>
      </div>
    )
  }
}

در اینجا من یک کامپوننت به نام Profile و کامپوننت های دیگری نظیر MyOrder و MyDownloads در این کامپوننت دارم. حال من می توانم همه ی این کامپوننت ها را به صورت inline بنویسم زیرا من همه ی داده ها را از یک منبع (user) بدست می آورم و همه ی کامپوننت های کوچک تر را به یک کامپوننت بزرگ تر تبدیل می کنیم.

از آنجایی که هیچ قانون صریحی درباره ی اینکه چه زمانی کد خود را به کامپوننت تبدیل کنید، وجود ندارد از خودتان بپرسید:

-آیا عملکرد کد شما درحال افزایش است؟

-آیا واقعا کار خود را نشان می دهد؟

-آیا می خواهید از کد خود دوباره استفاده کنید؟

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

به خاطر داشته باشید که کسی نمیخواهد یک کامپوننت حجیم 300-200 خطی را در کد شما ببیند.

کامپوننت ها در مقابل PureComponent و در مقابل Stateless Functional Component

برای یک توسعه دهنده ی React مهم است که بداند چه زمانی باید از یک Component ، PureComponent و یک Stateless Functional Component در کد خود استفاده کند.   

ممکن است در قطعه کد بالا توجه کرده باشید که بجای تعریف Profile به عنوان یک کامپوننت آن را به عنوان PureComponent فراخوانی کرده ام.

در ابتدا اجازه دهید که بررسی کنیم stateless functional component چیست.

Stateless Functional Component

const Billboard = () => (
  <ZoneBlack>
    <Heading>React</Heading>
    <div className="billboard_product">
      <Link className="billboard_product-image" to="/">
        <img alt="#" src="#">
      </Link>
      <div className="billboard_product-details">
        <h3 className="sub">React</h3>
        <p>Lorem Ipsum</p>
      </div>
    </div>
  </ZoneBlack>
);

Stateless functional component ها یکی از انواع بسیار معمول از کامپوننت هاست. این کامپوننت ها یک راه خوب و مختصر برای ساخت کامپوننت هایی که از هیچ وضعیت، ارجاعات یا چرخه ی عمر متدها استفاده نمی کنند، می باشد.

ایده ای که همراه stateless functional component است که state-less است و فقط یک تابع می باشد بنابراین مورد جالبی که در تعریف کامپوننت ها داریم این است که این توابع ثابت هستند که تعدادی داده برمی گردانند.

به زبان ساده تر stateless functional component ها توابعی هستند که JSX برمی گردانند.

PureComponent ها

معمولا زمانی که یک کامپوننت یک prop جدید می گیرد، React آن کامپوننت را مجددا رندر می کند اما گاهی یک کامپوننت، prop های جدیدی می گیرد که واقعا تغییر نکرده اند اما React برای آن ها یک رندر جدید انجام می دهد.

استفاده از PureComponent از رندر های اضافی جلوگیری می کند برای مثال اگر یک prop یک string یا Boolean است و تغییر کند یک PureComponent از آن مطلع خواهد شد اما اگر یک property داخل یک شیئ تغییر کند یک PureComponent یک رندر مجدد برای آن انجام نخواهد داد.

بنابراین شما از کجا متوجه خواهید شد که React یک رندر مجدد غیرضروری انجام می دهد؟ برای این کار می توانید از یک پکیج React عالی به نام Why Did You Update استفاده کنید این پکیج به شما در تشخیص کنسول زمانی که رندر مجدد غیر ضروری اتفاق می افتد، کمک خواهد کرد.

زمانی که شما متوجه یک رندر مجدد غیرضروری شدید می توانید بجای استفاده از کامپوننت، از PureComponent برای جلوگیری از رندر های مجدد غیرضروری استفاده کنید.

استفاده از ابزار های توسعه React

اگر شما برای اینکه یک توسعه دهنده ی React حرفه ای شوید جدی هستید از ابزار های توسعه ی React در روند توسعه ی خود استفاده کنید.

اگر شما از React استفاده کرده باشید، فرصت خوبی وجود دارد که کنسول شما ابزار های توسعه ی React را به شما معرفی کند.

ابزار های توسعه ی React برای تمام مرورگر های اصلی نظیر Chrome و Firefox دردسترس است.

 ابزار های توسعه ی React به شما دسترسی به تمام ساختار اپلیکیشن React خودتان را می دهد و این امکان را به شما می دهد تا تمام prop ها و وضعیت هایی که در اپلیکیشن استفاده شده است را ببینید.

ابزار های توسعه ی React راهی عالی برای کاوش در کامپوننت های React خودمان و کمک به تشخیص هر مشکلی در اپلیکیشن می باشد.

از کدهای شرطی Inline استفاده کنید

این گزینه ممکن است برای برخی از ویژگی ها مشکل ایجاد کند اما من متوجه شده ام که استفاده از کد های شرطی Inline باعث تمیزی کد React من می شود.

به این قطعه کد نگاهی بکنید:

<div className="one-col">
  {isRole('affiliate', user._id) &&
    <MyAffiliateInfo userId={user._id} />
  }
</div>

در اینجا من از یک تابع پایه ای که بررسی می کند آیا یک شخص "عضو" است یا نه با یک کامپوننت به نام <MyAffiliateInfo/> استفاده کرده ام.

مواردی که در این مورد عالی هستند:

-نیازی نیست که یک تابع جداگانه بنویسید.

-در تابع رندر نیازی نیست تا یک "if" جداگانه بنویسید.

-نیازی نیست تا یک "لینک" به جای دیگری در کامپوننت بسازید.

نوشتن کد های شرطی Inline تقریبا ساده است. با نوشتن کد شرطی شروع می کنید. شرط شما می تواند true باشد که در این صورت همیشه کامپوننت < MyAffiliateInfo/> نشان خواهد داد.

سپس این کد شرطی را با < MyAffiliateInfo/> با استفاده از && لینک می کنیم با این روش کامپوننت فقط زمانی رندر می شود که کد شرط true برگرداند.

هر زمان که ممکن است از کتابخانه ها استفاده کنید.

یک ویرایشگر کد باز کنید ( من از VS Code استفاده می کنم) و یک فایل .js درست کنید.

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

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

چیزی که درباره ی این قطعه کد جالب است این است که نه تنها از باگ ها جلوگیری می کند به شما در syntax های جدید و عالی کمک می کند.

کتابخانه های بسیاری وجود دارد که می تواند روی ویرایشگر کد شما نصب شود. کتابخانه ای که من برای VS Code استفاده می کنم ES7 React/Redux/React-Native/JS Snippets نامیده می شود.

React های داخلی (React Internals)- یادبگیرید React چگونه کار می کند

React های داخلی یک مجموعه ی پنج بخشی است که به من کمک کرد تا پایه های React را درک کنم و درنهایت یک توسعه دهنده ی React بهتر شوم.

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

این مورد بطور خاص برای کسانی که ایده ای دارند اما نمی دانند کد خود را کجا اجرا کنند مفید خواهد بود.

درک اینکه چگونه پایه های React کار می کند به شما در اینکه چگونه یک توسعه دهنده ی React بهتری شود کمک می کند.

خلاصه ای سریع

 linting- های خوب بگیرید. از ES Lint، Airbnb’s JavaScript Style Guide و ESLint React Plugin استفاده کنید.

-از propType ها و defaultProp ها استفاده کنید.

-بدانید که چه زمانی باید کامپوننت های جدید بسازید.

-بدانید چه زمانی باید یک کامپوننت، PureComponentو یک Stateless Functional Component بنویسید.

-از ابزار های توسعه ی React استفاده کنید.

-از کد های شرطی inline در کد خود استفاده کنید.

-از کتابخانه ها برای صرفه جویی در زمانی که روی کدهای تکراری می گذارید، استفاده کنید.

-یاد بگیرید چگونه با React Internals از React استفاده کنید.

-از ابزارهایی نظیر Bit/ StoryBook برای بهبود کامپوننت های خود در جریان کاری توسعه استفاده کنید.