سوالات مصاحبه React JS

React یک کتابخانه جاوا اسکریپت متن باز اعلامی (Declarative)، کارآمد و منعطف است که توسط فیس بوک در سال 2011 توسعه یافته است. این کتابخانه از یک رویکرد مبتنی بر مؤلفه (Component-based) برای ساخت مولفه های قابل استفاده مجدد در رابط کاربری، به ویژه برای برنامه های تک صفحه ای، پیروی می کند. وظیفه این این کتابخانه توسعه یک لایه نمایش تعاملی برای برنامه های وب و تلفن همراه می باشد که در ابتدا در سال 2011 در بخش اخبار فیس بوک مستقر شد و بعداً در محصولاتی مانند WhatsApp و Instagram مورد استفاده قرار گرفت.

6 0 0 این سوال از من پرسیده شده است  + 

فریم ورک React به عنوان بهترین فریم ورک به سرعت در بین توسعه دهندگان وب محبوبیت پیدا کرد. ویژگی های اصلی React عبارتند از: - JSX: JSX مخفف JavaScript XML است. JSX یک افزونه نحوی(Syntax extension) از جاوا اسکریپت است. شبیه به XML یا HTML است که توسط ReactJS استفاده می شود. به واسطه JSX، جاوا اسکریپت می تواند فریم ورک های React را فراخوانی کند. این افزونه ES6 را گسترش می دهد تا متنی مانند HTML بتواند با کد ReactJS همزیستی داشته باشد. استفاده از JSX ضروری نیست، اما استفاده از آن در ReactJS توصیه می شود. - مولفه ها(Components): برنامه ReactJS از چندین مؤلفه تشکیل شده است و هر مؤلفه منطق و کنترل های خاص خود را دارد. این مؤلفه ها می توانند قابل استفاده مجدد باشند که به شما در نگهداری کد هنگام کار بر روی پروژه های مقیاس بزرگتر کمک می کند. - One-way Data Binding: در واقع ReactJS به گونه ای طراحی شده است که از جریان داده های یک طرفه یا اتصال داده های یک طرفه(One-way Data Binding) پیروی می کند. اتصال یک طرفه داده به شما کمک می کند تا کنترل بیشتری روی کل برنامه داشته باشید. Flux الگویی است که به یک طرفه نگه داشتن داده های شما کمک می کند. این قابلیت باعث انعطاف پذیری و افزایش کارایی برنامه می شود. - DOM مجازی: DOM مجازی نمایی از DOM اصلی است. هر زمان که تغییراتی در برنامه وب اتفاق بیفتد، کل رابط کاربری مجدداً در DOM مجازی Re-render می شود. سپس تفاوت بین DOM قبلی و DOM جدید را بررسی می کند. به کمک اینکار، DOM واقعی فقط مواردی را که واقعاً تغییر کرده اند به روز می کند و بدین وسیله برنامه سریعتر شده و هیچ حافظه ای به هدر نمی رود. - سادگی: ReactJS از JSX استفاده می کند که برنامه و درک کد را ساده می کند. ما می دانیم که ReactJS یک رویکرد مبتنی بر مؤلفه است که باعث می شود کدها در صورت نیاز شما قابل استفاده مجدد باشند. این امر استفاده و یادگیری آن را ساده می کند. - کارایی: ReactJS به عنوان یک کتابخانه با عملکرد عالی شناخته شده است. دلیل این امر این است که یک DOM مجازی را مدیریت می کند. DOM یک API مولتی -پلتفرم برای برنامه نویسی است که با HTML، XML یا XHTML سروکار دارد. DOM به طور کامل در حافظه قرار دارد. به همین دلیل، زمانی که یک مولفه ایجاد می کنیم مستقیماً در DOM نمی نویسیم. به جای اینکار یک مؤلفه‌ مجازی ایجاد میکنیم که به DOM تبدیل می‌شود و اینکار منجر به عملکرد روان‌تر و سریع‌تر می‌شود.

8 2 0 این سوال از من پرسیده شده است  + 

JSX مخفف JavaScript XML است. JSX یک افزونه سینتکسی برای JavaScript است که به ما اجازه می دهد از HTML در React استفاده کنیم. معمولاً HTML و جاوا اسکریپت به طور جداگانه نوشته می شوند، اما React مؤلفه هایی را ایجاد می کند که شامل HTML و JavaScript هستند. شما نیازی به استفاده از JSX ندارید، اما JSX نوشتن برنامه های React و درک کد را آسان تر می کند. در بخش زیر دو مثال آورده شده است. اولی از JSX استفاده می کند ولی دومی نه:

Examples:

With  JSX:
const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);


Without JSX:
const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

6 1 0 این سوال از من پرسیده شده است  + 

مرورگرها نمی توانند مستقیماً JSX را بخوانند زیرا فقط می توانند اشیاء جاوا اسکریپت را درک کنند و JSX یک شی جاوا اسکریپت معمولی نیست. بنابراین، ما باید فایل JSX را با استفاده از ترانسپایلرهایی مانند Babel به یک شی جاوا اسکریپت تبدیل کنیم و سپس آن را به مرورگر منتقل کنیم.

8 0 0 این سوال از من پرسیده شده است  + 

- سریعتر از جاوا اسکریپت معمولی است به این دلیل که هنگام ترجمه کد به جاوا اسکریپت، بهینه سازی را انجام می دهد. - به جای جدا کردن فناوری‌ها با قرار دادن نشانه‌گذاری(markup) و منطق در فایل‌های جداگانه، React از مؤلفه‌هایی استفاده می‌کند که هر دو را شامل می‌شوند. - type-safe است و بیشتر خطاها را می توان در زمان کامپایل یافت. - ایجاد قالب ها(Templates) را آسان تر می کند.

7 2 0 این سوال از من پرسیده شده است  + 

DOM مخفف Document Object Model است. به زبان ساده، DOM یک نمایش ساختار یافته از عناصر HTML است که در یک صفحه وب یا برنامه وب وجود دارد. DOM کل UI برنامه شما را در قالب یک ساختار داده درختی نشان داده می شود. در این ساختار برای هر عنصر UI موجود در سند وب یک نود در نظر گرفته شده است. هر بار که DOM به روز می شود، عنصر به روز شده و فرزندان آن باید re-render شوند تا رابط کاربری صفحه ما به روز شود. در صفحات بزرگ با عناصر زیاد ممکن است این کار از نظر زمانی هزینه زیادی را به ما تحمیل کند. برای رفع این مشکل React از مکانیزمی به نام Virtual DOM استفاده می کند. Virtual DOM یک نمای مجازی از DOM واقعی است. هنگامی که DOM مجازی به‌روزرسانی شد، ریکت DOM مجازی فعلی را با DOM مجازی پیش از به روزرسانی مقایسه می‌کند و متوجه می‌شود که دقیقاً کدام اشیا DOM مجازی تغییر کرده‌اند. سپس React فقط آن اشیاء را در DOM واقعی به روز می کند.

9 1 0 این سوال از من پرسیده شده است  + 

- DOM واقعی کندتر به روز می شود. DOM مجازی سریعتر به روز می شود. - DOM واقعی می تواند مستقیماً HTML را به روز کند. DOM مجازی نمی تواند مستقیماً HTML را به روز کند. - اگر عنصری به روز شود، DOM مجازی JSX را به روز می کند. - در DOM واقعی، دستکاری DOM بسیار پرهزینه است. در DOM مجازی، دستکاری DOM بسیار آسان است. - اتلاف حافظه زیادی در DOM واقعی وجود دارد. هیچ اتلاف حافظه در DOM مجازی وجود ندارد.

7 0 0 این سوال از من پرسیده شده است  + 

در React، مولفه ها بلوک های سازنده برنامه های React هستند. این مؤلفه‌ها کل رابط کاربری React را به قطعات کوچک، مستقل و قابل استفاده مجدد تقسیم می‌کنند. React هر یک از این مؤلفه‌ها را به‌طور مستقل و بدون تأثیر بر بقیه اجزای رابط کاربری رندر(Render) می‌کند. از این رو، می توان گفت که در React، همه چیز یک مولفه است.

6 0 0 این سوال از من پرسیده شده است  + 

برای هر مولفه(Component) در React یک تابع ()render الزامی است. تابع ()render برای برگرداندن کدهای HTML که می خواهید در یک مولفه نمایش داده شوند، مورد استفاده قرار میگیرد. اگر نیاز به نمایش بیش از یک عنصر HTML در یک مولفه دارید، باید تمامی آنها در داخل یک تگ محصور کننده مانند <div>، <form>، <group> و غیره با هم گروه بندی کنید. مثال: اگر نیاز به نمایش عنوان دارید، می توانید این کار را به صورت زیر انجام دهید.

import React from 'react'  
   
class App extends React.Component {  
   render (){  
      return (  
         <h1>Mosahebeyar</h1>  
      )  
   }  
}  
export default App  

7 1 0 این سوال از من پرسیده شده است  + 

تفاوت های اصلی بین ReactJS و React Native در زیر آورده شده است. - ReactJS برای توسعه برنامه های کاربردی وب استفاده می شود ولی React Native برای توسعه اپلیکیشن های موبایل استفاده می شود. - ReactJS بر روی تمامی پلتفرم ها قابل اجرا است اما React Native مستقل از پلتفرم نیست. برای اجرا در همه پلتفرم ها تلاش بیشتری می طلبد. - در ReactJS از کتابخانه جاوا اسکریپت و CSS برای انیمیشن ها استفاده می کنداما React Native با کتابخانه های داخلی انیمیشن همراه است. - در ReactJS از React-router برای پیمایش صفحات وب استفاده می کند ولی React Native دارای کتابخانه Navigator داخلی برای پیمایش برنامه های موبایل می باشد. - در ReactJS از تگ های HTML استفاده می کند. در React Native از تگ های HTML استفاده نمی کند. - در ReactJS از Virtual DOM برای رندر کد مرورگر استفاده می شود. React Native از API خود برای رندر کد برنامه های موبایل استفاده می کند.

9 2 0 این سوال از من پرسیده شده است  + 

Props مخفف Properties است و آرگومان هایی هستند که به کامپوننت های React منتقل می شوند. Props شبیه به آرگومان های یک تابع در جاوا اسکریپت و ویژگی های یک تگ در HTML هستند. Props تغییرناپذیر(Immutable) هستند، بنابراین ما نمی توانیم props را از داخل کامپوننت تغییر دهیم. برای ارسال props به یک کامپوننت، از همان سینتکسی که ویژگی های HTML استفاده می کنند استفاده کنید:

import React from 'react';
import ReactDOM from 'react-dom/client';

function Car(props) {

//use brand props
  return <h2>I am a { props.brand }!</h2>;
}

//define brand as props
const myElement = <Car brand="Ford" />;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

8 1 0 این سوال از من پرسیده شده است  + 

ES6 مخفف ECMAScript 6 است. ECMAScript برای استانداردسازی جاوا اسکریپت ایجاد شد و ES6 ششمین نسخه ECMAScript است که در سال 2015 منتشر شد و با نام ECMAScript 2015 نیز شناخته می شود. React از ES6 استفاده می کند و برخی از ویژگی های جدید آن عبارتند از: - Calsses - Arrow Functions - Variables (let، const، var) - ()Array Methods like map - Destructing - Modules - Ternary Operator - Spread Operator

8 0 2 این سوال از من پرسیده شده است  + 

State یک ساختار قابل به روز رسانی است که داده ها و اطلاعات مربوط به کامپوننت را در خود نگه می دارد و ممکن است در پاسخ به اقدام کاربر یا رویداد سیستم تغییر کند. State قلب یک کامپوننت است که رفتار کامپوننت و نحوه رندر شدن آن را تعیین می کند. بیایید یک کامپوننت User با یک State به نام message ایجاد کنیم:

import React from 'react'  
  
class User extends React.Component {  
  constructor(props) {  
    super(props)  
  
    this.state = {  
      message: 'Welcome to Mosahebeyar'  
    }  
  }  
  
  render() {  
    return (  
      <div>  
        <h1>{this.state.message}</h1>  
      </div>  
    )  
  }  
}  
export default User  

11 3 1 این سوال از من پرسیده شده است  + 

- Props فقط خواندنی است. State هم قابل خواندن و هم قابل نوشتن است. - Props غیر قابل تغییر(Immutable) است. State قابل تغییر(Mutable) است. - Props به شما این امکان را می دهد که داده ها را از یک کامپوننت به کامپوننت های دیگر به عنوان آرگومان ارسال کنید. اما State فقط در داخل کامپوننت مورد استفاده قرار میگیرد. - Props توسط کامپوننت فرزند قابل دسترسی است. State توسط کامپوننت فرزند قابل دسترسی نیست. - Props برای برقراری ارتباط بین کامپوننت ها استفاده می شود. State برای نگهداری داده ها و اطلاعات یک کامپوننت استفاده می شود. - Props خارجی ست و توسط هر چیزی که کامپوننت را رندر می کند کنترل می شود. State داخلی است و توسط خود کامپوننت کنترل می شود.

10 0 1 این سوال از من پرسیده شده است  +