+300 سوال مصاحبه کاری ریکت

امروز لیست بزرگی از سوالات مصاحبه کاری React آماده کردم در 3 بخش اگر مقاله را دوست دارید،یه 5 ستاره به مقاله من بدهید😁

1. React چیست؟

React یک open-source frontend JavaScript library است که برای ساخت رابط های کاربری به ویژه برای برنامه های تک صفحه ای استفاده می شود. برای مدیریت لایه نمایش برای برنامه های وب و موبایل استفاده می شود. React توسط جردن واک، مهندس نرم افزاری که برای فیس بوک کار می کند، ایجاد شده است. React اولین بار در سال 2011 در فید خبری فیس بوک و در سال 2012 در اینستاگرام به کار گرفته شد.

2. ویژگی های اصلی React چیست؟

ویژگی های اصلی React عبارتند از:

· با توجه به اینکه considering های RealDOM گران هستند، به جای RealDOM از VirtualDOM استفاده می کند.

· از رندر سمت سرور پشتیبانی می کند.

· از جریان داده های یک طرفه یا اتصال داده ها پیروی می کند.

· برای توسعه reusable/composable UI components استفاده می کند.

3. JSX چیست؟

JSX یک پسوند نحوی شبیه به XML برای ECMAScript است (مخفف مخفف JavaScript XML). اساساً فقط قند نحوی را برای function React.createElement () فراهم می کند و به ما بیان جاوا اسکریپت را همراه با نحو قالب مانند HTML می دهد.

در مثال زیر متن داخل تگ <h1> به عنوان function جاوا اسکریپت به function رندر برگردانده می شود.

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    );
  }
}

4.تفاوت بین Element و Component چیست؟

یک Element یک plain object است که آنچه را که می خواهید بر روی صفحه نمایش از نظر DOM nodes یا سایر components ظاهر شود، توصیف می کند. Elements میتوانند Elements دیگری را در props خود داشته باشند. ایجاد یک React element ارزان است. هنگامی که یک element ایجاد می شود، هرگز جهش نمی یابد.

نمایش object React Element به صورت زیر خواهد بود:

const element = React.createElement('div', { id: 'login-btn' }, 'Login');

function React.createElement() فوق یکobject را returns میکند:

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

و در نهایت با استفاده از ReactDOM.render():

<div id=&quotlogin-btn&quot>Login</div>

در حالی که یک component را می توان به چند روش مختلف اعلام کرد. این می تواند یک کلاس با متد render() باشد. از طرف دیگر، در موارد ساده، می توان آن را به عنوان یک function تعریف کرد. در هر صورت، props را به عنوان ورودی می گیرد و یک درخت JSX را به عنوان خروجی برمی گرداند:

const Button = ({ onLogin }) => (
  <div id={'login-btn'} ={onLogin}>
    Login
  </div>
);

سپس JSX به درخت function React.createElement () منتقل می شود:

const Button = ({ onLogin }) =>
  React.createElement('div', { id: 'login-btn', : onLogin }, 'Login');

5. چگونه در React کامپوننت ایجاد کنیم؟

دو راه ممکن برای ایجاد یک کامپوننت وجود دارد.

Function Components: این ساده ترین راه برای ایجاد یکcomponent است. اینها JavaScript functions خالص هستند که props object را به عنوان پارامتر اول می پذیرند و return React elements میکند

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>;
}

Class Components: همچنین می توانید از کلاس ES6 برای تعریف یک component استفاده کنید. function component فوق را می توان به صورت زیر نوشت

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>;
  }
}

6. چه زمانی از یک کامپوننت کلاس به جای یک Function Componentاستفاده کنیم؟

اگر کامپوننت به متدهای state یا lifecycle methods نیاز دارد، از class component و در غیر این صورت از function component استفاده کنید. با این حال، از React 16.8 با افزودن Hooks، میتوانید از state،ا lifecycle methods و سایر ویژگیهایی استفاده کنید که فقط در class component در function component شما موجود بودند.

7. Pure Components چیست؟

React.PureComponent دقیقاً مشابه React.Component است با این تفاوت که متد () shouldComponentUpdate را برای شما مدیریت می کند. هنگامی که props یا state تغییر می کند، PureComponent یک مقایسه سطحی در هر دو props و state انجام می دهد. از سوی دیگر، کامپوننت props و state را با حالت بعدی مقایسه نمیکند. بنابراین، هر زمان که ComponentUpdate فراخوانی شود، کامپوننت به صورت پیشفرض رندر میشود.

💎شاید این مقاله هم برای شما مفید باشد: 5 UI فریمورک برتر ReactJS

8. State در React چیست؟

State یک component یک object است که اطلاعاتی را در خود نگه می دارد که ممکن است در طول عمر کامپوننت تغییر کند. ما همیشه باید سعی کنیم state خود را تا حد امکان ساده کنیم و تعداد components های stateful را به حداقل برسانیم.

بیایید یک component کاربری با message state ایجاد کنیم

class User extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: 'Welcome to React world',
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
}

State شبیه به props است، اما خصوصی است و به طور کامل توسط component کنترل می شود. یعنی برای هیچ accessible ای غیر از component ای که آن را مالک و تنظیم می کند قابل دسترسی نیست.

9. props در React چیست؟

Props ورودی به components هستند. آنها single values یا objects containing هستند که حاوی مجموعهای از values هستند که با استفاده از یک قرارداد نامگذاری مشابه ویژگیهای HTML-tag به componentsها ارسال میشوند. آنها داده هایی هستند که از یک parent component به یک child component منتقل می شوند.

هدف اصلی props در React ارائه omponent functionality زیر است:

1. custom data را به component خود منتقل کنید.

2. Trigger state تغییر می کند.

3. از طریق this.props.reactProp درون متد render() کامپوننت استفاده کنید.

به عنوان مثال، اجازه دهید یک component's با ویژگی reactProp ایجاد کنیم:

<Element reactProp={'1'} />

این نام reactProp (یا هر چیزی که به ذهنتان خطور کرد) تبدیل به یک ویژگی متصل به object props بومی React می شود که در ابتدا روی تمام اجزای ایجاد شده با استفاده از کتابخانه React وجود دارد.

props.reactProp

10. تفاوت بین state و props چیست؟

هر دو props و state ا JavaScript objects ساده هستند. در حالی که هر دوی آنها دارای اطلاعاتی هستند که بر خروجی رندر تأثیر می گذارد، از نظر functionality با توجه به component متفاوت هستند. Props به کامپوننت مشابه پارامترهای function منتقل می شود در حالی که state در داخل component مشابه با variablesهای اعلام شده در یک function مدیریت می شود.

11.چرا نباید state را مستقیماً به روز کنیم؟

اگر بخواهید مستقیماً state را بهروزرسانی کنید، component را دوباره رندر نمیکند.

//Wrong
this.state.message = 'Hello world';

در عوض از متد setState() استفاده کنید. به روز رسانی را برای component's state object برنامه ریزی می کند. هنگامی که state تغییر می کند، component با رندر مجدد پاسخ می دهد.

//Correct
this.setState({ message: 'Hello World' });

توجه: میتوانید مستقیماً در سازنده یا با استفاده از نحو اعلان فیلد کلاس آخرین جاوا اسکریپت به state object اختصاص دهید.

12.هدف از callback function به عنوان آرگومان setState() چیست؟

پس از اتمام setState و رندر شدن کامپوننت، function callback فراخوانی می شود. از آنجایی که setState() ناهمزمان است، function callback برای هر پستی استفاده می شود.

توجه: توصیه می شود به جای این function فراخوانی، ازlifecycle method استفاده کنید.

setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'));

13.تفاوت بین مدیریت eventHTML و React چیست؟

در زیر برخی از تفاوت های اصلی بین مدیریت HTML و React event آورده شده است.

در HTML، نام event باید با حروف کوچک باشد:

<button =&quotactivateLasers()&quot></button>

در حالی که در React از قرارداد camelCase پیروی می کند:

<button ={activateLasers}>

در HTML، می توانید برای جلوگیری از رفتار پیش فرض، false را برگردانید:

<a href=&quot#&quot ='console.log(&quotThe link was clicked.&quot); return false;' />

در حالی که در React باید به صراحت () preventDefault را فراخوانی کنید:

function handleClick(event) {
  event.preventDefault();
  console.log('The link was clicked.');
}

در HTML، باید function را با اضافه کردن () فراخوانی کنید، در حالی که در react نباید () را با نام function اضافه کنید. (به عنوان مثال به function "activateLasers" در نقطه اول مراجعه کنید)

14.synthetic events در React چیست؟

SyntheticEvent یک بسته بندی متقابل مرورگر در اطراف native event مرورگر است. API آن همانند native event مرورگر است، از جمله stopPropagation() و preventDefault()، با این تفاوت که eventsها در همه مرورگرها یکسان عمل می کنند.

15. عبارات شرطی درون خطی(inline conditional expressions) چیست؟

می توانید از دستورات if یا عبارت های سه تایی که از JS در دسترس هستند برای رندر عبارات شرطی استفاده کنید. جدای از این رویکردها، شما همچنین می توانید هر عبارتی را در JSX با قرار دادن آنها در پرانتزهای مجعد و سپس توسط عملگر منطقی JS && تعبیه کنید.

<h1>Hello!</h1>;
{
  messages.length > 0 && !isLogin ? (
    <h2>You have {messages.length} unread messages.</h2>
  ) : (
    <h2>You don't have unread messages.</h2>
  );

16.کاربرد refs چیست؟

ref برای return ارجاع به element استفاده می شود. در بیشتر موارد باید از آنها اجتناب شود، با این حال، زمانی که نیاز به دسترسی مستقیم به DOM element یا نمونه ای از یک component دارید، می توانند مفید باشند.

💎شاید این مقاله هم برای شما مفید باشد: بیش از 35 قالب و تم رایگان React

17. چگونه می توان ref ها را ایجاد کرد؟

دو رویکرد(approaches) وجود دارد

این یک رویکرد اخیرا اضافه شده است. Ref ها با استفاده از متد React.createRef ایجاد می شوند و از طریق ویژگی ref به React elements متصل می شوند. برای استفاده از ref ها در کامپوننت، فقط ref را به ویژگی instance در سازنده اختصاص دهید.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

شما همچنین می توانید از روش ref callbacks صرف نظر از نسخه React استفاده کنید. به عنوان مثال، bar component's input element جستجو به صورت زیر قابل دسترسی است:

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.txtSearch = null;
    this.state = { term: '' };
    this.setInputSearchRef = (e) => {
      this.txtSearch = e;
    };
  }
  Change(event) {
    this.setState({ term: this.txtSearch.value });
  }
  render() {
    return (
      <input
        value={this.state.term}
        ={this.onInputChange.bind(this)}
        ref={this.setInputSearchRef}
      />
    );
  }
}

شما همچنین می توانید از refs در function components با استفاده از closures استفاده کنید. توجه: شما همچنین میتوانید از تماسهای پاسخ درونی استفاده کنید، حتی اگر این روش توصیهشده نیست.

18. Virtual DOM چیست؟

Virtual DOM (VDOM) نمایشی از DOM واقعی در حافظه است. نمایش یک UI در حافظه نگهداری می شود و با DOM "واقعی" همگام سازی می شود. این مرحله ای است که بین فراخوانی render function و نمایش elements روی صفحه اتفاق می افتد. کل این فرآیند reconciliation نامیده می شود.

19.Virtual DOM چگونه کار می کند؟

Virtual DOM در سه مرحله ساده کار می کند.

هر زمان که دادههای اساسی تغییر کند، کل رابط کاربری مجدداً در نمایش DOM مجازی ارائه میشو

سپس تفاوت بین نمایش DOM قبلی و جدید محاسبه می شود.

20.تفاوت Shadow DOM و Virtual DOM چیست؟

Shadow DOM یک فناوری مرورگر است که عمدتاً برای تعیین محدوده variablesها و CSS در اجزای وب طراحی شده است. Virtual DOM مفهومی است که توسط کتابخانه ها در جاوا اسکریپت در بالای APIهای مرورگر پیاده سازی شده است.

برای مشاهده لیست کامل سوالات و تصاویر میتونین به وب سایت ام مراجعه کنین کلیک کنید