سوال های مصاحبه شغلی React - سطح مبتدی | بخش اول

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

تاریخچه React

React یک کتابخانه و فریمورک جاوا اسکریپت کارآمد، منعطف و متن باز است که توسعه دهندگان با استفاده از آن می‌توانند اپلیکیشن‌های وب ساده، سریع و مقیاس‌پذیری بسازند. مهندس نرم‌افزاری به نام جردن واک (Jordan Walke) که برای فیسبوک کار می‌کرد، فریمورک React.js را ایجاد کرد. React برای اولین بار در سال 2011 میلادی در فید خبری فیس بوک و در سال 2012 در اینستاگرام مورد استفاده قرار گرفت. توسعه‌دهندگانی که دانش قبلی از زبان جاوا اسکریپت دارند، به راحتی می‌توانند اپلیکیشن‌های وب مختلف را با کمک React توسعه دهند.
هوک‌های ری اکت این امکان را به شما می‌دهند که از state و feature های ری اکت, بدون نوشتن کلاس‌ها و انجام کارهای اضافه, به راحتی استفاده کنید. به عبارت ساده می‌توان گفت که Hook های React توابعی هستند که state های React را به feature های چرخه حیات مربوط به اجزای تابع(component) متصل می‌کنند. React Hooks  از جمله ویژگی‌هایی هستند که در آخرین نسخه React یعنی نسخه 16.8 پیاده‌سازی شده‌اند.

گستردگی React

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

سوالات مصاحبه React برای مبتدیان

1. React چیست؟

React یک کتابخانه جاوا اسکریپت فرانت‌اند و متن باز(open-source) است که برای توسعه رابط‌های کاربری- به خصوص اپلیکیشن‌های تک صفحه‌ای- گزینه مناسبی است. از آنجایی که این کتابخانه از رویکرد مبتنی بر کامپوننت (Component-based) پیروی می‌کند، کاربرد زیادی در ساخت کامپوننت‌های رابط کاربری (UI) پیچیده و قابل استفاده مجدد در اپلیکیشن‌های موبایل و وب دارد.

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

• از رندرینگ سمت سرور (server-side rendering) پشتیبانی می‌کند.
• از آنجایی که دستکاری مدل RealDOM هزینه‌بر است، به جای DOM واقعی (مخفف Data Object Model به معنی مدل شی داده) از DOM مجازی استفاده می‌کند.
• داده‌ها را به صورت یک طرفه یا با استفاده جریان داده (data flow) پیروی می‌کند.
• برای توسعه نما (view) از اجزای رابط کاربری قابل استفاده مجدد یا ترکیبی استفاده می‌کند.

2. مزایای استفاده از React چیست؟

به طور کلی الگوی معماری MVC به اختصار Model View Controller نامیده می‌شود و برای توسعه و ساخت اپلیکیشن‌های دارای رابط کاربری مورد استفاده قرار می‌گیرد. مزایای react به شرح زیرند:

• استفاده از Virtual DOM برای بهبود کارایی برنامه: React برای رندر کردن نما از DOM مجازی استفاده می‌کند. DOM مجازی در واقع یک نمایش مجازی از DOM واقعی است و هر بار که داده‌ها در یک برنامه react تغییر می‌کنند، یک DOM مجازی جدید ایجاد می‌شود. ایجاد یک DOM مجازی بسیار سریع‌تر از رندر کردن رابط کاربری در داخل مرورگر است. بنابراین کارایی برنامه با استفاده از DOM مجازی (Virtual DOM) بهبود می‌یابد. برای دانش بیشتر به بخش رایگان تفاوت DOM و Virtual DOM مراجعه کنید.
• منحنی یادگیری ملایم: فریمورک React در مقایسه با فریمورک هایی مثل Angular، منحنی یادگیری ملایم‌تری دارد. به این معنی که هر کسی با دانش کمی از جاوا اسکریپت می‌تواند  با استفاده از React شروع به ساخت اپلیکیشن‌های وب کند.
• سئو دوستانه (SEO friendly): توسعه دهندگان با استفاده از React می‌توانند رابط‌های کاربری جذابی را توسعه دهند که به راحتی در موتورهای جستجوی مختلف قابل پیمایش باشد. همچنین امکان رندر سمت سرور را هم فراهم می‌کند که باعث بهبود سئوی اپلیکیشن می‌شود.
• کامپوننت‌های قابل استفاده مجدد: React از معماری مبتنی بر کامپوننت برای توسعه اپلیکیشن‌ها استفاده می‌کند. کامپوننت‌ها، بیت (bit) ‌های کد مستقل و قابل استفاده مجدد هستند. این کامپوننت‌ها را می‌توان بین اپلیکیشن‌های مختلف با عملکرد مشابه به اشتراک گذاشت. استفاده مجدد از کامپوننت‌ها، سرعت توسعه برنامه را بالا می‌برد.
• تنوع زیاد برای انتخاب کتابخانه: هنگام توسعه یک اپلیکیشن بر اساس نیاز خود، React به شما آزادی عمل کاملی برای انتخاب ابزارها، کتابخانه‌ها و معماری می‌دهد.

3. ()useState در ری اکت چیست؟

()useState یکی از Hookهای ساخته شده توسط ری اکت هست که به شما این اجازه را می‌دهد که متغیرهای مدنظر را در بخش (component) های مختلف که کار خاصی را انجام می‌دهند ذخیره کنیم.
در مثال زیر useState(0) یک Array نمایش می دهد که count اولین پارامتر است و داده ی در حال حاضر را نشان میدهد و دومین پارامتر که ()setCounter هست به شما این اجازه را می دهد تا داده ی این Hook را به روز رسانی کنید.

...
const [count, setCounter] = useState(0);
const [otherStuffs, setOtherStuffs] = useState(...);
...
const setCount = () => {
  setCounter(count + 1);
  setOtherStuffs(...);
  ...
};

ما می‌توانیم ()setCounter را برای به روز کردن داده‌ی state خود در هر جایی استفاده کنیم. در این مثال ما داریم از ()setCounter در داخل فانکشن setCount استفاده می‌کنیم که در آن کارهای مختلف دیگری هم انجام می‌شود. ایده‌ی استفاده از Hookها این است که کد ما کاربردی تر باشد و از class-based components های اضافی که مورد نیاز نیستند جلوگیری کنیم.

۴. keyها در ری اکت چی هستند؟

Keyها یک ویژگی خاص از جنس string هستند که وقتی از آنها استفاده می‌کنیم که از لیستی از عناصر استفاده می‌کنیم.
مثالی از استفاده از key :

const ids = [1,2,3,4,5];
const listElements = ids.map((id)=>{
return(
<li key={id.toString()}>
 {id}
</li>
)
})

اهمیت استفاده از keyها:

• keyها کمک می‌کنند تا ری اکت عنصرهایی که اضافه، عوض و یا حذف شده اند را تشخیص دهد.
• Keyها باید برای درست کردن یک هویت خاص برای هر عنصر به عناصر های Array داده بشوند.
• بدون Keyها ری اکت متوجه ترتیب منحصر به فرد بودن هر عنصر نمی‌شود.
• Keyها معمولا برای برای نشان دادن لیستی از سمت API که شامل داده می‌شود استفاده می‌شوند.

تذکر: Key های داخل Arrayها باید در میان دیگر عنصرهای داخل آن Array منحصر به فرد باشند و نیاز به وجود داشتن در کل فایل یا پروژه خاص ندارند.

۵. JSX چیست؟

JSX مخفف JavaScript XML است و به شما این اجازه را می‌دهد که در فایل‌های جاوااسکریپتی، HTML بنویسید و آنها را بدون استفاده کردن از فانکشن هایی مانند ()appendChild یا ()createElement داخل DOM قرار دهید, 
همانطور که در مقاله‌های اصلی سایت ری اکت گفته شده, JSX یک روش خیلی راحت‌تر به جای استفاده از ()React.createElement ارائه می‌دهد.
نکته:‌ ما همچنین می توانیم بدون استفاده از JSX هم اپلیکیشن‌های ری اکتی درست کنیم.
بیاید نحوه کارکرد JSX را بررسی کنیم:
بدون استفاده از JSX ما باید یک عنصر را مانند زیر درست کنیم:

const text = React.createElement('p', {}, 'This is a text');
const container = React.createElement('div','{}',text );
ReactDOM.render(container,rootElement)

اما با استفاده از JSX کد بالا به این صورت ساده می‌شود:

const container = (
<div>
 <p>This is a text</p>
</div>
);
ReactDOM.render(container,rootElement);

همانطور که می‌بینید ما در کد جاوااسکریپت از کد HTML استفاده می‌کنیم.

۶. تفاوت‌های میان functional components و class components چیست؟

قبل از معرفی Hook ها در ری اکت, functional components ها (stateless components) نامیده می‌شدند یا همان component های بدون state و بر اساس ویژگی های پایه ای که داشتند، جزئی از class components بوده و با class componentها برابر نبودند.
و بر اساس این ویژگی ها بگذارید functional components را با class components مقایسه کنیم.

1. تعیین:

functional components چیزی نیستند به جز فانکشن‌ها در جاوااسکریپت و از همین رو می‌توان با استفاده از arrow functions یا همان کلمه‌ی function تعیین کرد:

 function card(props){
  return(
     <div className="main-container">
       <h2>Title of the card</h2>
     </div>
   )
  }
  const card = (props) =>{
   return(
     <div className="main-container">
       <h2>Title of the card</h2>
     </div>
   )
  }

اما در آن سمت class components با کلاس‌های ES6 تعیین می‌شوند:

class Card extends React.Component{
 constructor(props){
    super(props);
  }
   render(){
     return(
       <div className="main-container">
         <h2>Title of the card</h2>
       </div>
     )
   }
  }

2. مدیریت کردن prop ها: 

بگذارید component مقابل را با prop ها رندر کنیم و برسی کنیم چگونه functional components و class components ورودی‌هایشان را مدیریت می‌کنند:

<Student Info name="Vivek" rollNumber="23" />

در functional components مدیریت کردن prop ها خیلی سرراست و مستقیم است.
هر prop یک argument ارائه می‌دهد که می‌توان مستقیم داخل عناصر HTML از آن استفاده کرد:

function StudentInfo(props){
  return(
    <div className="main">
      <h2>{props.name}</h2>
      <h4>{props.rollNumber}</h4>
    </div>
  )
}

ولی در class components ها prop ها را مدل دیگری مدیریت می‌کنیم:

class StudentInfo extends React.Component{
  constructor(props){
    super(props);
   }
   render(){
     return(
       <div className="main">
         <h2>{this.props.name}</h2>
         <h4>{this.props.rollNumber}</h4> 
       </div>
     )
   }
  } 

همانطور که در کد بالا می‌بینید کلمه‌ی کلیدی this در class components استفاده شده.

3. مدیریت state ها:

functional componentها از Hookهای ری اکتی برای مدیریت stateها استفاده می‌کنند. هوک useState برای قرار دادن state مورد نظر در آن متغییر (که همان addStudent است) داخل component مورد نیاز استفاده می‌شود:

function ClassRoom(props){
  let [studentsCount,setStudentsCount] = useState(0);
   const addStudent = () => {
     setStudentsCount(++studentsCount);
  }
   return(
     <div>
       <p>Number of students in class room: {studentsCount}</p>
       <button onClick={addStudent}>Add Student</button>
     </div>
   )
{

از آنجایی که useState یک array شامل دو عنصر به ما برمی‌گرداند, اولین عنصر داده‌ی در حال حاضر state را نگه داری می‌کند و دومین عنصر یک فانکشن برای به روز رسانی داده‌ی داخل state است.
در کد بالا ما یک state با ساختار array داریم که عنصر studentCount با داده‌ی کنونی 0 و یک فانکشن با نام setStudentCount که وظیفه‌ی به روز کردن state را دارد، می‌بینید.
برای استفاده کردن از state می‌توانید در کد بالا ببینید که اسم عنصر می تواند مستقیم استفاده شود تا داده ی کنونیِ state خوانده شود.
ما نمی‌توانیم از Hookهای ری اکتی در داخل class components استفاده کنیم, برای همین مدیریت state ها در داخل آنها کاملا متفاوت است. 
بیایید یک نگاه به کد بالا در class components بندازیم:

class ClassRoom extends React.Component{
       constructor(props){
           super(props);
           this.state = {studentsCount : 0};
           
           this.addStudent = this.addStudent.bind(this);
        }
           
           addStudent(){
           this.setState((prevState)=>{
              return {studentsCount: prevState.studentsCount++}
           });
        }
           
           render(){
            return(
              <div>
                <p>Number of students in class room: {this.state.studentsCount}</p>
                <button onClick={this.addStudent}>Add Student</button>
              </div>
            )
          }
        }  

در کد بالا می‌بینید که از this.state برای قرار دادن عنصر studentsCount به 0 استفاده می‌کنیم.
همچنین برای صدا زدن این state از this.state.studentsCount استفاده می‌کنیم.
برای به روز رسانی state خود هم نیاز داریم که ابتدا فانکشن addStudent را به ,this بایند(bind) کنیم.
و آن وقت است که قادر به استفاده از setState هستیم که برای به روز رسانی state به کار می‌رود.