مجموعه سوال و جواب‌های ری‌اکت

اگه از کتاب خوشتون اومد به گیت‌هابمون مراجعه کنین و بهمون⭐️ بدین. اگر هم قصد مشارکت داشتید خیلی خوشحال می‌شیم 😃 http://github.com/mariotek

دانلود کتاب به فرمت‌های PDF/Epub

می‌تونین خیلی راحت از نسخه آنلاین استفاده کنین یا اگه به فایل‌ کتاب می‌خوایین دسترسی داشته باشین، از بخش ریلیزهای گیت هاب(این لینک) به فرمت‌های مختلف دانلود کنین.

فهرست

هسته ری‌اکت

1. ری‌اکت چیه؟

   ری‌اکت یه کتابخونه متن‌باز هست که برای ساختن رابط کاربری به خصوص برنامه‌های تک صفحه‌ای استفاده میشه. از این کتابخونه برای مدیریت لایه view توی برنامه‌های وب و موبایل استفاده میشه. توسط Jordan Walke تولید شده که یه مهندس نرم‌افزار توی شرکت فیس‌بوک هستش. اولین بار سال ۲۰۱۱ و روی برنامه اینستاگرام مورد استفاده قرار گرفت.

   فهرست

2. اصلی‌ترین ویژگی‌های ری‌اکت کدوما هستن؟

   اصلی‌ترین ویژگی‌های ری‌اکت اینا هستن:

   • از VirtualDOM به جای RealDOM استفاده‌می‌کنه چون هزینه تغییرات RealDOM زیاده (یعنی پیدا کردن DOM Element و حذف یا به روز رسانی با سرعت کمتری انجام میشه)

   • از SSR یا همون Server Side Rendering پشتیبانی ‌می‌کنه

   • از جریان داده‌ها یا data binding به صورت یک طرفه (unidirectional) پیروی‌ می‌کنه

   • برای توسعه view از UI کامپوننت‌های reusable/composable استفاده ‌می‌کنه

   فهرست

3. JSX چیه؟

   JSX یه افزونه با سینتکسی شبیه به XML برای ECMAScript است (مخفف Javascript XML). اگه بخوایم ساده بگیم وظیفه اش اینه که سینتکسی ساده تر از React.createElement دراختیارتون قرار میده، شما می‌تونین Javascript رو در کنار ساختاری شبیه به HTML داشته باشید.

   تو مثال زیر می‌بینید که نوشته داخل تگ h1 مثل یک تابع Javascript به تابع render تحویل داده میشه.

   1. function component

   function App() {
       return (
         <div>
           <h1>{"Welcome to React world!"}</h1>
         </div>
       );
   }
   

   2. class component

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

   فهرست

4. تفاوت‌های Element و Component چیه؟

   Element یک شی ساده است که وظیفه داره اون چیزی که روی صفحه نمایش داده میشه رو توصیف کنه، حالا ممکنه به صورت یک DOM node باشه یا به صورت componentهای دیگه. Element ها می‌تونن شامل Elements های دیگه به عنوان props باشند. ساختن یک Element در React کار ساده و کم دردسریه اما وقتی که ساخته شد هیچ وقت نمیشه تغییرش داد.

   تو مثال زیر یک شی که توسط React Element ساخته شده رو میبینیم:

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

   تابع React.createElement که توی قطعه کد بالا میبینید یه object شبیه به این برمی‌گردونه:

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

   و آخرش هم با استفاده از ReactDOM.render می‌تونیم توی DOM , Render کنیم

   <div id="login-btn">Login</div>
   

   درحالیکه یه component می‌تونه به روشهای مختلفی ساخته بشه. می‌تونه یه class باشه با یه متد render. یا حتی به عنوان یه جایگزین ساده‌تر به صورت یک تابع تعریف بشه. در هر دو حالت کامپوننت ساخته شده props رو به عنوان ورودی دریافت‌ می‌کنه و یه خروجی رو به صورت یه JSX tree برمی‌گردونه. به مثال زیر دقت کنیم که چطور با استفاده از یه تابع و JSX یک کامپوننت ساخته میشه:

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

   JSX به React.createElement ترنسپایل (transpile) میشه:

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

   فهرست

5. تو ری‌اکت چطوری کامپوننت می‌سازیم؟

   تو سوال قبل یه اشاره کوچیک کردیم که دوتا راه برای ساختن کامپوننت وجود داره.
   ۱. Function Components: این ساده‌ترین راه برای ساختن یه کامپوننته. یه Pure Javascript Function رو در نظر بگیرید که Props که خودش یه object هست رو به عنوان پارامتر ورودی میگیره و یه React Element به عنوان خروجی برمی‌گردونه مثل همین مثال پایین:

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

   ۲. Class Components: شما می‌تونین از class که در ES6 به جاواسکریپت اضافه شده برای این کار استفاده کنیم. کامپوننت مثال قبلی رو اگه بخواییم با class پیاده سازی کنیم اینجوری میشه:

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

   فقط یادتون نره تو این روش متدrender یه جورایی required میشه.

   فهرست

6. کی باید از Class Component بجای Function Component استفاده کنیم؟

   میشه گفت هیچ لزومی به این‌کار نیست(مگر در مواقع خیلی خاص مثل error boundaryها) و از ورژن 16.8 ری‌اکت به بعد و با اضافه شدن هوک‌ها به فانکشن کامپوننت‌ها، شما می‌تونین از state یا lifecycle methodها یا تمامی فیچرهایی که قبلا فقط در کلاس کامپوننت ‌ها قابل استفاده بود، توی فانکشن کامپوننت‌هاتون استفاده کنین.
   ولی قبلا اگه کامپوننت نیاز به state یا lifecycle methods داشت از کلاس کامپوننت‌ها باید استفاده می‌کردیم و در غیر این صورت می‌رفتیم سراغ فانکشن کامپوننت‌ها.

   فهرست

7. Pure Components چیه؟

   برای اینکه ری‌رندر شدن یه کامپوننت رو کنترل کنیم، توی کلاس کامپوننت‌ها بجای Component از PureComponent کامپوننت‌مون رو می‌ساختیم، در حقیقت PureComponent دقیقا مثل Component می‌مونه فقط تنها تفاوتی که داره اینه که برخلاف Component خودش به صورت خودکار متد shouldComponentUpdate رو هندل‌می‌کنه.
   وقتی که props یا state در کامپوننت تغییر‌می‌کنه، PureComponent یه مقایسه سطحی روی props و state انجام میده (shallow comparison) در حالیکه Component این مقایسه رو به صورت خودکار انجام نمیده و به طور پیش‌فرض کامپوننت هربار که shouldComponentUpdate فراخوانی بشه re-render میشه. بنابراین توی Component باید این متد override بشه.
   برای انجام این‌کار روی فانکشن کامپوننت‌ها، میشه از React.memo استفاده کرد.

   فهرست

8. state تو ری‌اکت چیکار می‌کنه؟

   State در هر کامپوننت بسته به کلاس کامپوننت بودن یا فانکشن بودن نوع متفاوتی داره، مثلا در کلاس کامپوننت‌ها state یه آبجکته که یه سری اطلاعات که در طول عمر کامپوننت ما ممکنه تغییر کنه رو در خودش ذخیره‌می‌کنه. ما باید تمام تلاشمون رو بکنیم که state‌مون در ساده ترین حالت ممکن باشه و تاجایی که می‌تونیم تعداد کامپوننت‌هایی که stateful هستن رو کاهش بدیم. به عنوان مثال بیایید یه کامپوننت User رو که یه state داره بسازیم:

   1. function

   const User = () => {
     const [message, setMessage] = useState('Hello react world!');
   
     return (
       <div>
         <h1>{message}</h1>
       </div>
     );
   }
   

   2. class

   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 بهم شبیه هستن ولی Stateها کاملا در کنترل کامپوننت هستن و فقط مختص به همون کامپوننت هستن(private). یعنی state ‌ها در هیچ کامپوننتی به غیر از اونی که مالکstate هست در دسترس نخواهند بود.

   فهرست

9. props تو ری‌اکت چیکار می‌کنه؟

   _Prop_ها ورودی کامپوننت‌ها هستن. می‌تونن یه مقدار ساده یا یه object شامل یه مجموعه مقدار باشن که در لحظه ایجاد کامپوننت و بر اساس یه قاعده نام گذاری که خیلی شبیه به attributeهای HTML هست، به کامپوننت پاس داده میشن. در واقع این مقادیر، داده‌هایی هستن که از کامپوننت پدر به فرزند تحویل داده میشن.

   هدف اصلی وجود Props در ری‌اکت ایجاد ساختارهای زیر در یک کامپوننت‌ـه، به طورکلی میشه گفت که هدفشون:

   1 - پاس دادن مقادیر به کامپوننت‌های فرزند.

   2 - پاس دادن متد تغییر state و trigger کردن اون متد در زمان تغییر دلخواه.

   3 - استفاده از اونا برای پاس دادن jsx و رندر کردن یه المنت دلخواه داخل یه کامپوننت دیگه.

   به عنوان مثال، یه کامپوننت با استفاده ازrenderProp میسازیم:

   <Element renderProp={<span>Hi there</span>} />
   

   این renderProp(یا هرچیز دیگه‌ای که شما می‌تونین اسمشو بزارین) در نهایت تبدیل به یک property خواهد شد که داخل props ورودی کامپوننت به شکل object قابل دسترس هست.

   const Element = (props) => {
     return <div>
       {props.renderProp}
     </div>
   }
   

   توی کامپوننت بالا یه jsx با prop به کامپوننت Element داده میشه و توی اون رندر میشه 😃

   فهرست

10. تفاوت state و props چیه؟

    هر دوتاشون javascript plain object هستن، یعنی یه object که یه سری property داره که به یه سری مقدار ختم میشن و خبری از فانکشن و چیزهای دیگه روی این object وجود نداره(تقریباِ). هردوتاشون وظیفه دارن مقادیری که روی render تاثیر گذار هست رو نگه‌داری کنن اما عملکردشون با توجه به کامپوننت متفاوت خواهد بود. Props شبیه به پارامترهای ورودی یک فانکشن، به کامپوننت پاس داده میشن در حالیکه state شبیه به متغییرهایی که داخل فانکشن ساخته شدن، توسط خود کامپوننت ایجاد و مدیریت میشه.

    فهرست

11. چرا نباید state رو مستقیما آپدیت کنیم؟

    اگه یه بار تلاش کنید که مستقیما state رو آپدیت کنید متوجه می‌شین که کامپوننت شما مجددا render نمیشه.

    // Wrong
    let [message, setMessage] = useState('test');
    message = "Hello world";
    

    به جای اینکه مستقیما state رو آپدیت کنیم باید از متد setState در Class Component و از useState در Function Components استفاده کنیم. این متدها یک آپدیت در شی state رو برنامه ریزی و مدیریت می‌کنن و وقتی تغییر انجام شد کامپوننت شما re-render خواهد شد.

    const [message, setMessage] = React.useState("Hello world");
    
    setMessage("New Hello world");
    

    فهرست

12. هدف از متدهای callback توی استفاده از setState چیه؟

    توی کلاس کامپوننت‌ها میشه بعد از انجام شدن یه setState، یه کار خاص دیگه‌ای رو توی callback انجام داد.
    callback function زمانی که setState تموم شد و کامپوننت مجددا render شد فراخوانی میشه. از اونجایی که setState به شکل asynchronous یا همون غیرهمزمان اجرا میشه از callback برای کارهایی استفاده میشه که بعد از تابع setState قراره اجرا بشن.

    نکته مهم: بهتره که به جای callback از lifecycle متد‌ها استفاده کنیم.

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

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

    function useStateCallback(initialState) {
        const [state, setState] = useState(initialState);
        const cbRef = useRef(null); // mutable ref to store current callback
        
        const setStateCallback = useCallback((state, cb) => {
            cbRef.current = cb; // store passed callback to ref
            setState(state);
        }, []);
        
        useEffect(() => {
            // cb.current is `null` on initial render, so we only execute cb on state *updates*
            if (cbRef.current) {
                cbRef.current(state);
                cbRef.current = null; // reset callback after execution
            }
        }, [state]);
        
        return [state, setStateCallback];
    }
    

    یه کم پیچیده به نظر میرسه ولی خب می‌تونه یه هوک خیلی کاربردی باشه. به شکل زیر هم ازش استفاده می‌کنیم:

    const App = () => {
        const [state, setState] = useStateCallback(0); // same API as useState + setState with cb
        
        const handleClick = () => {
            setState(
                prev => prev + 1,
                // 2nd argument is callback , `s` is *updated* state
                s => console.log("I am called after setState, state:", s)
            );
        };
        
        return <button onClick={handleClick}>Increment</button>;
    }
    

    فهرست

13. تفاوت بین نحوه مدیریت رویداد HTML و React چیه؟

    1. توی HTML، عنوان رخداد حتما باید با حرف کوچیک شروع بشه یا اصطلاحا lowercase باشه:

    <button onclick="activateLasers()"></button>
    

    ولی توی ری‌اکت از camelCase پیروی می‌کنه:

    <button onClick={activateLasers}>Test</button>
    

    2. توی HTML می‌تونیم برای جلوگیری از اجرای رفتار پیش‌فرض(preventDefault) یه مقدار false برگرودونیم:

    <a href="#" onclick='console.log("The link was clicked."); return false;' />
    

    ولی توی ری‌اکت برای انجام این مورد حتما باید از preventDefault استفاده بشه:

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

    3. توی HTML برای اجرای تابع حتما باید اونو با گذاشتن پرانتزهایی که بعد اسمش میزاریم invoke کنیم()
       ولی توی ری‌اکت اجباری به گذاشتن () جلوی اسم تابع نیست.(برای مثال به کد اول و تابع "activateLasers" دقت کنید)

    فهرست

14. چطوری متد یا event رو به تابع callback توی JSX bind کنیم؟

    توی کلاس کامپوننت‌ها به سه روش مختلف می‌تونیم this رو به تابع هندلر موردنظرمون bind کنیم:

    1. Bind کردن توی Constructor: توی کلاس‌های جاواسکریپتی متدها به صورت پیش‌فرض bound نمیشن. همین موضوع توی کلاس کامپوننت‌های ری‌اکتی برای متدهای موجود هم رخ میده که اکثرا توی متد سازنده یا همون constructor می‌آییم bind می‌کنیم.

    class Component extends React.Componenet {
      constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        // this now refers to the current Component
      }
    
      render(){
        return (
          <button onClick={this.handleClick}>{"Click me"}</button>
        );
      }
    }
    

    2. استفاده از فیلد عمومی کلاس(public): اگه از روش اول خوشتون نمیاد این روش هم می‌تونه context درست رو موقع callbackها براتون فراهم کنه.

    handleClick = () => {
      console.log("this is:", this);
    };
    
    <button onClick={this.handleClick}>{"Click me"}</button>
    

    3. توابع arrow توی callback: می‌تونین از توابع arrow به شکل مستقیم توی callbackها استفاده کنین.

    <button onClick={(event) => this.handleClick(event)}>{"Click me"}</button>
    

    نکته: اگه متد‌های callback به عنوان prop به کامپوننت‌های فرزندشون پاس داده بشن، ممکنه اون کامپوننت‌ها re-renderingهای ناخواسته‌ای داشته باشن. توی اینگونه موارد روش توصیه شده استفاده از .bind یا فیلد عمومی کلاس برای مدیریت پرفورمنس هستش.

    فهرست

15. چطوری میشه یک مقدار رو به یه تابع callback یا eventHandler پاس بدیم؟

    می‌تونیم از توابع arrow استفاده کنیم که با wrap کردن دور event handler و پاس دادن مقدار موردنظرمون بهش کارمونو انجام بدیم:

    const handleClick = (id) => {
      console.log("Hello, your ticket number is", id);
    };
    
    return users.map(user => <button onClick={() => handleClick(user.id)}>Test</button>);
    

    جدا از این روش‌ها، میشه با ایجاد یه curry، یه تابع دیگه دور تابع هندلر خودمون wrap کنیم و پارامتر رو به اون پاس بدیم:

    const handleClick = (id) => () => {
      console.log("Hello, your ticket number is", id);
    };
    
    return users.map(user => <button onClick={handleClick(user.id)} />);
    

    فهرست

16. Synthetic events(رویدادهای مصنوعی) تو ری‌اکت کدوما هستن؟

    SyntheticEvent یه رخداد cross-browser هست که به‌عنوان یه wrapper دور eventهای اصلی مرورگر قرار می‌گیره. رابط API برای کارکردن با اون دقیقا مثل رخداد native مرورگرهاست که شامل stopPropagation و preventDefault میشه، با این تفاوت که این رخداد‌ها بر روی همه مرورگرها کار می‌کنن.

    فهرست

17. عبارات شرطی درون خطی چیه؟

    برای بررسی یه شرط می‌تونیم از عبارت شرطی if استفاده کنیم، البته عملگرهای درون خطی سه‌گانه(ternary) هم میشه استفاده کرد که از ویژگی‌های خود js هستن. جدا از این ویژگی‌ها، ‌می‌تونیم هر عبارتی داخل آکولاد و توی JSX به اصطلاح embed یا ترکیب کنیم و با عملگر منطقی && ترکیب کنیم، مثال پایینی رو ببنید:

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

    فهرست

18. پارامترهای key چیکار می‌کنن و مزایای استفاده از اونا توی حلقه‌ها چیه؟

    پارامتر key یه attribute ویژه است و موقعی که داریم یه آرایه از المان‌ها رو ایجاد می‌کنیم این پارامتر رو باید بهشون به عنوان prop بدیم. Keyها به ری‌اکت کمک می‌کنن که بدونه باید کدوم اِلمان رو دقیقا اضافه، حذف یا به روز کنه.

    اکثرا از ID یا از یه دیتای یونیک به عنوان key استفاده می‌کنن:

    const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
    

    مواقعی که یه آی‌دی خاص برای المان‌ها نداریم، ممکنه بیایید و از اندیس یا همون index به عنوان key استفاده کنید:

    const todoItems = todos.map((todo, index) => (
      <li key={index}>{todo.text}</li>
    ));
    

    نکته:

    1. استفاده از indexها برای key توصیه نمیشه چون ممکنه ترتیب عناصر خیلی راحت عوض بشه و این می‌تونه پرفورمنس برنامه رو تحت تاثیر بزاره.

    2. اگه بیایین و لیست مورد نظر رو به جای li مثلا با یه کامپوننت به اسم ListItem جایگزین کنین و prop موردنظر key رو به جای li به اون پاس بدیم، یه warning توی کنسول خواهیم داشت که میگه key پاس داده نشده.

    فهرست

19. کاربرد refها چیه؟

    ref به عنوان یه مرجع برای دسترسی مستقیم به اِلمان موردنظرمون استفاده میشه. تا حد امکان و توی اکثر مواقع بهتره از اونا استفاده نکنیم، البته خیلی می‌تونن کمک کننده باشن چون دسترسی مستقیمی به DOM element یا instance اصلی component بهمون میدن.

    فهرست

20. چطوری از ref استفاده کنیم؟

    دو تا روش وجود داره:

    1. استفاده از React.createRef و پاس دادن اون به element مورد نظرمون با attributeref.

    const Component = () => {
      const myRef = React.createRef();
    
      return <div ref={myRef} />;
    };
    

    2. اگه از نسخه ۱۶.۸ به بالاتر هم استفاده می‌کنیم که یه هوک به اسم useRef هست و می‌تونیم به سادگی توی کامپوننت‌های تابعی ازش استفاده کنیم. مثل:

    const RenderCounter = () => {
      const counter = useRef(0);
    
      // Since the ref value is updated in the render phase,
      // the value can be incremented more than once
      counter.current = counter.current + 1;
    
      return <h1>{`The component has been re-rendered ${counter} times`}</h1>;
    };
    

    فهرست

21. forward ref چیه؟

    Ref forwarding ویژگی‌ایه که به بعضی از کامپوننت‌ها این اجازه رو میده ref دریافت شده رو به کامپوننت فرزند انتقال بدن.

    const ButtonElement = React.forwardRef((props, ref) => (
      <button ref={ref} className="CustomButton">
        {props.children}
      </button>
    ));
    
    // Create ref to the DOM button:
    const ref = React.createRef();
    <ButtonElement ref={ref}>{"Forward Ref"}</ButtonElement>;
    

    فهرست

22. بین callback refs و تابع findDOMNode کدوم رو ترجیح میدی؟

    ترجیح اینه که از callback refs به جای findDOMNode استفاده کنیم، چون findDOMNode از توسعه‌ کدهای ری‌اکت در آینده جلوگیری‌می‌کنه و ممکنه خطاهای ناخواسته ایجاد کنه.

    رویکرد قدیمی استفاده از findDOMNode:

    class MyComponent extends Component {
      componentDidMount() {
        findDOMNode(this).scrollIntoView();
      }
    
      render() {
        return <div></div>;
      }
    }
    

    رویکرد توصیه شده:

    const MyComponent = () => {
      const nodeRef = useRef();
      useEffect(() => {
        nodeRef.current.scrollIntoView();
      }, []);
      
      return <div ref={nodeRef} />;
    }
    

    فهرست

23. چرا Refهای متنی منقضی محسوب می‌شوند؟

    اگه قبلا با ری‌اکت کار کرده باشین، احتملا با یه API قدیمی تر آشنا هستین که توی اون ویژگی ref یه رشته‌ست، مثل ref='textInput' و DOM به صورت refs.textInput قابل دسترسی‌ـه. البته این ویژگی توی نسخه ۱۶ ری‌اکت حذف شده و توصیه نمیشه استفاده بشه، فقط برای یادگیری هست.

    1. ری‌اکت رو مجبور می‌کنن که عناصر در حال اجرا رو دنبال کنه و این مساله یکم مشکل سازه چون باعث میشه خطاهای عجیب و غریب وقتی که ماژول ری‌اکت باندل میشه، رخ بده.

    2. قابل انعطاف نیستن. اگه یه کتابخونه خارجی یه ref رو روی فرزند قرار بده، کاربر نمی‌تونه یه ref دیگه‌ای رو روی اون اضافه کنه.

    3. با یه آنالیزگر استاتیک مثل Flow کار نمی‌کنه و در حقیقت Flow یا تایپ‌اسکریپت نمی‌تونه حدس بزنه که فریم‌ورک چه کاری روی ref انجام میده، مثل نوع داده اون(که ممکنه متفاوت باشه). refهای callbackدار بیشتر با آنالیزگرها سازگارترن.

    4. اون طور که اکثر مردم از الگوی "render callback" انتظار دارن کار نمی کنه(برای مثال <DataGrid renderRow={this.renderRow} />)

    class MyComponent extends Component {
      renderRow = (index) => {
        // This won't work. Ref will get attached to DataTable rather than MyComponent:
        return <input ref={"input-" + index} />;
    
        // This would work though! Callback refs are awesome.
        return <input ref={(input) => (this["input-" + index] = input)} />;
      };
    
      render() {
        return <DataTable data={this.props.data} renderRow={this.renderRow} />;
      }
    }
    

    فهرست

24. Virtual DOM چیه؟

    Virtual DOM(VDOM) یه کپی داخل memory از DOM واقعی هستش. این کپی از المان‌های رابط کاربری توی حافظه رم نگهداری میشه و همواره با DOM اصلی و واقعی همگام سازی(sync) میشه. این مرحله بین تابع رندر و نمایش elementها روی صفحه رخ میده و به مجموعه اتفاقاتی که برای مدیریت این موارد انجام میشه reconciliation میگن.

    فهرست

25. Virtual DOM چطوری کار می‌کنه؟

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

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

       

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

       

    3. بعد از انجام محاسبات، DOM واقعی فقط با مواردی که واقعاً تغییر کردن به روز میشه.

       

    فهرست

26. تفاوت بین Shadow DOM و Virtual DOM چیه؟

    shadow DOM یه تکنولوژی مرورگره که در ابتدا برای تعیین متغیر‌ها و ایزوله‌سازی css دروب کامپوننت(Web component) طراحی شده بود. virtual DOM مفهومیه که توسط کتابخونه‌ها برای مدیریت DOM توسط جاواسکریپت با استفاده از APIهای مرورگرها اجرا شده.

    فهرست

27. React Fiber چیه؟

    Fiber موتور جدید برای عملیات reconciliation هست یا میشه گفت که پیاده‌سازی مجدد الگوریتم هسته ری‌اکت نسخه ۱۶ هست. هدف پیاده‌سازی ReactFiber برای بهبود کارکرد توی جاهایی مثل ایجاد انیمیشن، کار روی layout، کار با gestureها و قابلیت اینکه عملیات در حال اجرا رو متوقف، قطع یا مجددا فعال کنیم ساخته شده. البته می‌تونه برای اولویت‌بندی بروزسانی‌های لازم توی DOM رو هم مدیریت کنه.

    فهرست

28. هدف اصلی React Fiber چیه؟

    هدف پیاده‌سازی ReactFiber برای بهبود کارکرد توی ناحیه‌هایی مثل انیمیشن، layout، کار با gestureها بود. میشه گفت مهم‌ترین ویژگی incremental-rendering بوده که قابلیت بخش‌بندی(chunk کردن) عملیات اجرایی و متوقف و اجرا کردن اون توی فریم‌های مختلف هست.

    فهرست

29. کامپوننت‌های کنترل شده چی هستن؟

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

    به عنوان مثال، اگر یه input داشته باشیم و بخواییم اسم فرد رو بگیریم و به شکل حروف بزرگ نگهداری کنیم، باید از handleChange مثل زیر استفاده کنیم:

    const [name, setName] = useState('');
    const handleChange = (event) => {
      setName(event.target.value.toUpperCase());
    }
    
    return <input value={name} onChange={handleChange} />
    

    فهرست

30. کامپوننت‌های کنترل نشده چی هستن؟

    کامپوننت‌های کنترل نشده کامپوننت‌هایی هستن که stateهاشون رو به صورت داخلی ذخیره می کنن و ما می‌تونیم با استفاده از یک ref و از روی DOM مقدار فعلی اون input رو پیدا کنیم. این یکم شبیه HTML سنتیه.

    مثلا توی کامپوننت UserProfile زیر، ورودی name با استفاده از ref قابل دسترسیه.

    const UserProfile = () => {
      const inputRef = useRef();
    
      const handleSubmit = (event) => {
        alert("A name was submitted: " + inputRef.current.value);
        event.preventDefault();
      }
    
      
      return (
        <form onSubmit={handleSubmit}>
          <label>
            {"Name:"}
            <input type="text" ref={input} />
          </label>
          <input type="submit" value="Submit" />
        </form>
      );
    }
    

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

    فهرست

31. تفاوت‌های بین createElement و cloneElement کدوما هستن؟

    عناصر JSX به توابع React.createElement تبدیل میشن تا عناصر ری‌اکتی بسازن که برای نمایش UI استفاده میشن. درحالی که cloneElement برای کلون کردن یه عنصر و فرستادنش به عنوان prop جدید استفاده میشه.

    فهرست

32. مفهوم lift state up یا مدیریت state در لول بالاتر رو توضیح میدی؟

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

    فهرست

33. فازهای مختلف از lifecycle کامپوننت کدوما هستن؟

    چرخه حیات کامپوننت سه مرحله داره:

    1. Mounting: کامپوننت آماده اجرا روی DOM مرورگر هستش. این مرحله مقداردهی اولیه از متدهای lifecycle constructor، ‍‍getDerivedStateFromProps، ‍‍render و componentDidMount رو پوشش میده.

    2. Updating: در این مرحله، کامپوننت از دو طریق به روزرسانی میشه، ارسال prop‌های جدید و به روزرسانی state از طریق setState. این مرحله متد‌های getDerivedStateFromProps، shouldComponentUpdate، render، getSnapshotBeforeUpdate و componentDidUpdate رو پوشش میده.

    3. Unmounting: در مرحله آخر کامپوننت مورد نیاز نیست و از DOM مرورگر حذف میشه. این مرحله فقط شامل متد ‍‍componentWillUnmount میشه.

    البته بهتره اینجا این نکته رو بگیم که ری‌اکت برای به روز کردن DOM یه سری فازبندی‌هایی داره که خود اون مرحله رو توی سه تا فاز انجام میده. این پایین به این فازبندی‌ها اشاره می‌کنیم.

    1. Render کامپوننت بدون هیچ سایدافکتی رندر میشه. این فقط در مورد کامپوننت‌های خالص صدق‌می‌کنه و در این مرحله، ری‌اکت می‌تونه رندر رو متوقف، حذف یا restart کنه.

    2. Pre-commit قبل از اینکه کامپوننت تغییرات رو روی DOM‌ اعمال کنه، لحظه‌ای وجود داره که به ری‌اکت اجازه میده از DOM داخل متد getSnappshotBeforeUpdate بخونه.

    3. Commit ری‌اکت با DOM کار‌می‌کنه و lifecycle‌های آخر رو به ترتیب اجرا‌می‌کنه، ‍‍componentDidMount برای نصب، componentDidUpdate برای به روزرسانی و componentWillUnmount برای غیرفعال کردن.

    مراحل ری‌اکت ۱۶.۳ (یا نسخه تعاملی)

    

    قبل از ورژن ۱۶.۳

    

    فهرست

34. متدهای lifecycle کامپوننت کدوما هستن؟

    ری‌اکت ۱۶.۳ به بعد

    • getDerivedStateFromProps: درست قبل از اینکه Render اجرا بشه فراخوانی میشه و در هر بار render فراخوانی میشه.
      برای موارد نادری که نیاز داریم از state مشتق بگیریم این متد استفاده میشه. بهتره که اینو بخونید [اگه نیاز داشتین که از state مشتق بگیرین] (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).

    • componentDidMount: بعد از اولین رندر اجرا میشه و همه درخواست‌های AJAX، DOM یا بروزرسانی state و تنظیمات event listeners اجرا میشه.

    • shouldComponentUpdate: تعیین‌می‌کنه که کامپوننت به روز بشه یا نه. به طور پیش فرض مقدار true رو برمی‌گردونه. اگه مطمئن باشیم که کامپوننت بعد از اینکه state یا props به روزرسانی میشه نیازی به رندر شدن نداره، می‌تونیم مقدار false رو برگردونیم. اینجا جای خوبی برای بهبود عملکرده چون این امکان رو بهمون میده که اگه کامپوننت prop جدید میگیره از render مجدد جلوگیری کنیم.

    • getSnapshotBeforeUpdate: درست قبل از رندر مجدد خروجی به DOM اجرا میشه. هر مقداری که توسط این متد برگشت داده میشه به متد componentDidUpdate انتقال داده میشه. برای گرفتن اطلاعات از موقعیت اسکرول DOM مفیده.

    • componentDidUpdate: بیشتر برای به روزرسانی DOM در پاسخ به تغییرات state‌ یا Prop استفاده میشه. این متد زمانی که shouldComponentUpdate مقدار false رو برگردونه قابل استفاده ست.

    • componentWillUnmount این متد برای کنسل کردن همه درخواست‌های شبکه خروجی یا حذف همه event listener‌های مرتبط با کامپوننت استفاده میشه.

    قبل ورژن ۱۶.۳

    • componentWillMount: قبل از رندر اجرا میشه و برای پیکربندی سطح برنامه توی کامپوننت ریشه استفاده میشه.

    • componentDidMount: بعد از اولین رندر اجرا میشه و همه درخواست‌های AJAX، DOM یا بروزرسانی state و تنظیمات event listeners اجرا میشه.

    • componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.

    • shouldComponentUpdate: تعیین‌می‌کنه که کامپوننت به روز بشه یا نه. به طور پیش فرض مقدار true رو برمی‌گردونه. اگه مطمئن باشیم که کامپوننت بعد از اینکه state یا props به روزرسانی میشه نیازی به رندر شدن نداره، می‌تونیم مقدار false رو برگردونیم. اینجا جای خوبی برای بهبود عملکرده چون این امکان رو بهمون میده که اگه کامپوننت prop جدید میگیره از render مجدد جلوگیری کنیم.

    • componentWillUpdate: قبل از رندر مجدد کامپوننت وقتی که تغییرات state و props توسط ‍‍‍‍shouldComponentUpdate مقدار ‍‍true رو برگردونده باشه اجرا میشه.

    • componentDidUpdate: بیشتر برای به روزرسانی DOM در پاسخ به تغییرات state‌ یا Prop استفاده میشه. این متد زمانی که shouldComponentUpdate مقدار false رو برگردونه قابل استفاده ست.

    • componentWillUnmount این متد برای کنسل کردن همه درخواست‌های شبکه خروجی یا حذف همه event listener‌های مرتبط با کامپوننت استفاده میشه.

      فهرست

35. کامپوننت‌های Higher-Order چی هستن؟

    کامپوننت با مرتبه بالا(HOC) تابع‌ـیه که یه کامپوننت می‌گیره و یه کامپوننت جدید برمی‌گردونه. اصولا این الگوییه که از ماهیت تلفیقی ری‌اکت گرفته شده.

    ما اینا رو به عنوان کامپوننت‌های خالص می‌شناسیم چون می‌تونن هر کدوم از کامپوننت‌های فرزندشون رو که به صورت پویا ارائه شدن رو بپذیرن ولی هیچ کدوم از رفتارهای کامپوننت‌های ورودی خودشون رو تغییر نمیدن.

    const EnhancedComponent = higherOrderComponent(WrappedComponent);
    

    HOC خیلی جاها می‌تونه استفاده بشه:

    1. استفاده مجدد از کد، منطق و مفهوم bootstrap.

    2. استفاده برای Render hijacking و کنترل خروجی رندر کامپوننت.

    3. مفهوم state و دستکاری اون.

    4. دستکاری propها.

    فهرست

36. چطوری می‌تونیم props proxy برای کامپوننت‌های HOC ایجاد کنیم؟

    می‌تونیم prop‌های انتقال داده شده به کامپوننت رو با استفاده از الگوی props proxy اضافه یا ویرایش کنیم:

    function HOC(WrappedComponent) {
      return class Test extends Component {
        render() {
          const newProps = {
            title: "New Header",
            footer: false,
            showFeatureX: false,
            showFeatureY: true,
          };
    
          return <WrappedComponent {...this.props} {...newProps} />;
        }
      };
    }
    

    فهرست

37. context چیه؟

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

    const { Provider, Consumer } = React.createContext(defaultValue);
    

    فهرست

38. children prop چیه؟

    children یه prop هستش که بهمون اجازه میده کامپوننت‌ها رو به عنوان فرزند و به شکل داده به کامپوننت‌های دیگه انتقال بدیم (prop.children)، درست مثل prop‌های دیگه‌ای که استفاده می‌کنیم. درخت کامپوننت که بین تگ باز و بسته کامپوننت‌ها قرار داره به اون کامپوننت به عنوان prop children پاس داده میشه.

    یه تعداد متد برای کار بااین prop‌ها روی react API وجود داره که شامل React.Children.map، React.Children.forEach، React.Children.count، React.Children.only، React.Children.toArray میشه.
    یه مثال ساده از استفاده از children prop این پایین نوشته شده.

    const MyDiv = React.createClass({
      render: function () {
        return <div>{this.props.children}</div>;
      },
    });
    
    ReactDOM.render(
      <MyDiv>
        <span>{"Hello"}</span>
        <span>{"World"}</span>
      </MyDiv>,
      node
    );
    

    فهرست

39. چطوری میشه تو React کامنت نوشت؟

    کامنت‌ها توی React/JSX شبیه به جاواسکریپت هستن اما کامنت‌های چند خطی توی آکولاد قرار میگیرن.

    کامنت‌های تک خطی:

    <div>
      {/* Single-line comments(In vanilla JavaScript, the single-line comments are represented by double slash(//)) */}
      {`Welcome ${user}, let's play React`}
    </div>
    

    کامنت‌های چند خطی:

    <div>
      {/* Multi-line comments for more than
       one line */}
      {`Welcome ${user}, let's play React`}
    </div>
    

    فهرست

40. چرا توی کامپوننت‌های کلاس باید توی constructor تابع super رو با مقدار props صدا بزنیم؟

    کلاس constructor تا زمانی که متد super صدا زده نشده نمی‌تونه از this استفاده کنه. همین مورد در رابطه با کلاس‌های ES6 هم صدق می‌کنه. دلیل اصلی انتقال پارامتر‌های props به متد فراخوان super دسترسی داشتن به this.props توی constructor هستش.

    با پاس دادن props:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
    
        console.log(this.props); // prints { name: 'John', age: 42 }
      }
    }
    

    بدون پاس داده شدن props:

    class MyComponent extends React.Component {
      constructor(props) {
        super();
    
        console.log(this.props); // prints undefined
    
        // but props parameter is still available
        console.log(props); // prints { name: 'John', age: 42 }
      }
    
      render() {
        // no difference outside constructor
        console.log(this.props); // prints { name: 'John', age: 42 }
      }
    }
    

    کد بالا نشون میده که this.props فقط توی constructor متفاوت عمل می‌کنه و بیرون از constructor عملکردش عادیه، دلیلش هم اینه که توی متد سازنده کلاس، هنوز instance کامل ساخته نشده و در حال ساخته شدنه.

    فهرست

41. reconciliation چیه؟

    وقتی state‌ یا props یه کامپوننت تغییر‌می‌کنه، ری‌اکت با مقایسه عنصر تازه return شده و نمونه render شده قبلی تصمیم میگیره که به روزرسانی DOM واقعا ضروریه یا نه. وقتی این دو مقدار با هم برابر نباشه، ری‌اکت به روزرسانی DOM رو انجام میده. به این فرایند reconciliation گفته میشه.

    فهرست

42. چطوری با یه اسم داینامیک set state کنیم؟

    اگر برای تبدیل کد JSX از ES6 یا babel استفاده می‌کنین می‌تونید این کار رو با computed property names انجام بدین.

    handleInputChange(event) {
      this.setState({ [event.target.id]: event.target.value })
    }
    

    اینجا ما یه فیلد از Object رو به شکل متغیر داریم پر می‌کنیم، البته روی فانکشن کامپوننت‌ها و با استفاده از هوک useState هم میشه به شکل داینامیک یه object رو پر کرد و فقط لازمه یه state به شکل object داشته باشیم:

    const [myState, setMyState] = useState();
    const handleInputChange = (event) => {
      setMyState({ [event.target.id]: event.target.value });
    }
    

    فهرست

43. یه اشتباه رایج برای مدیریت توابع eventها که باعث میشه با هر رندر توابع مجدد ساخته بشن چی هستش؟

    باید مطمئن باشیم که موقع استفاده از تابع هندلرمون به عنوان پارامتر، اون تابع صدا زده نشه. مثلا:

    // Wrong: handleClick is called instead of passed as a reference!
    return <button onClick={this.handleClick()}>{'Click Me'}</button>
    

    و به جاش تابع رو بدون پرانتز(فراخوانی) و به شکل رفرنس پاس بدیم:

    // Correct: handleClick is passed as a reference!
    return <button onClick={this.handleClick}>{'Click Me'}</button>
    

    فهرست

44. تابع lazy که برای lazy load استفاده میشه رو می‌تونیم به صورت name export خروجی بگیریم؟

    نه، تابع React.lazy در حال حاضر فقط خروجی پیش فرض(default export) رو پشتیبانی‌می‌کنه. اگه بخوایم ماژول‌هایی رو import کنیم که به شکل پیش‌فرض export نشدن، می‌تونیم یه ماژول واسطه تعریف کنیم که اونا رو به عنوان پیش فرض مجددا تعریف‌ می‌کنه. همچنین تضمین‌ می‌کنه که tree shaking همچنان به کار خودش ادامه میده و کامپوننت‌ موردنظر کدهای استفاده نشده رو نمی‌گیره.
    بیاین یه کامپوننتی بنویسیم که چندین کامپوننت رو به عنوان خروجی ارائه میده.

    // MoreComponents.js
    export const SomeComponent = /*... */;
    export const UnusedComponent = /*... */;
    

    و کامپوننت MoreComponents.js رو در فایل واسطه IntermediateComponent.js مجددا به عنوان خروجی تعریف کنیم.

    // IntermediateComponent.js
    export { SomeComponent as default } from "./MoreComponents.js";
    

    حالا می‌تونیم ماژول خودمون رو با استفاده از تابع lazy به شکل زیر import کنیم.

    import React, { lazy } from "react";
    const SomeComponent = lazy(() => import("./IntermediateComponent.js"));
    

    فهرست

45. چرا ری‌اکت از className بجای class استفاده می‌کنه؟

    class یه کلمه کلیدی توی جاواسکریپت‌ـه و فایل با پسوند JSX در حقیقت همون فایل جاواسکریپت‌ـه. دلیل اصلی استفاده ری‌اکت از className به جای class همینه و یه مقدار رشته‌ای رو به عنوان پارامتر className پاس میدیم. مثل کد زیر:

    render() {
      return <span className='menu navigation-menu'>Menu</span>
    }
    

    فهرست

46. fragmentها چی هستن؟

    یه الگوی مشخص توی ری‌اکت وجود داره که برای کامپوننت‌هایی استفاده میشه که چندین عنصر یا کامپوننت رو برمیگردونن. _Fragment_‌ها این امکان رو فراهم می‌کنن که بتونیم لیستی از فرزندان رو بدون اضافه کردن نود‌های اضافی به DOM گروه بندی کنیم.

    render() {
      return (
        <React.Fragment>
          <ChildA />
          <ChildB />
          <ChildC />
        </React.Fragment>
      )
    }
    

    همچنین یه حالت مختصرتر هم وجود داره که به شکل زیر می‌تونیم fragment بسازیم:

    render() {
      return (
        <>
          <ChildA />
          <ChildB />
          <ChildC />
        </>
      )
    }
    

    فهرست

47. چرا fragmentها از تگ‌های div بهترن؟

    البته می‌دونیم که نه فقط div بلکه از بقیه تگ‌های html هم میشه بجای fragment استفاده کرد ولی به دلایل زیر بهتره از fragment استفاده بشه:

    1. Fragment‌ها یه کم سریعترن و با ایجاد نکردن DOM node اضافی حافظه کمتری استفاده می‌کنن. این فقط روی nodeهای بزرگ و درخت‌های بزرگ و عمیق مزیت داره.

    2. بعضی از مکانیزم‌های CSS مثل Flexbox و CSS Grid روابط والد و فرزندی خاصی دارند و اضافه کردن div در وسط، حفظ طرح مورد نظرمون را دشوار‌می‌کنه.

    3. DOM Inspector بهم ریختگی کمتری داره و میشه راحت‌تر کدهای برنامه رو دیباگ کرد.

    فهرست

48. توی ری‌اکت portal‌ها چیکار می‌کنن؟

    Portal روشی توصیه شده برای رندر کردن کامپوننت فرزند به شکل DOM و خارج از سلسله مراتب DOM کامپوننت والد هستش.

    ReactDOM.createPortal(child, container);
    

    اولین آرگومان یه فرزند قابل رندر شدن هستش، مثل عنصر، رشته، یا fragment. آرگومان دوم عنصر DOM هستش.

    فهرست

49. کامپوننت stateless چیه؟

    اگه رفتار یه کامپوننت مستقل از state اون کامپوننت باشه بهش کامپوننت stateless گفته میشه. می‌تونیم از یه تابع یا یه کلاس برای ساخت کامپوننت‌های stateless استفاده کنیم،

    فهرست

50. کامپوننت stateful چیه؟

    اگه رفتار یه کامپوننتی به state اون کامپوننت وابسته باشه، به عنوان کامپوننت statefull شناخته میشه.

    const App = () => {
      const [count, setCount] = useState(0);
    
      return (
        //...
      );
    }
    

    قبل از نسخه 16.8 ری‌اکت:
    قبل از اینکه هوک‌ها این امکان رو بهمون بدن که بتونیم از state و ویژگی‌های دیگه ری‌اکت استفاده کنیم بدون نوشتن کلاس‌ کامپوننت‌ها استفاده کنیم، نمی‌تونستیم فانکشن کامپوننت رو statefull کنیم و مجبور بودیم برای کامپوننت ساده فوق یه همچین کلاسی بنویسیم:

    class App extends Component {
        constructor(props) {
            super(props);
            this.state = { count: 0 };
        }
    
        render() {
          // ...
        }
    }
    

    فهرست

51. چطوری prop‌های کامپوننت رو اعتبارسنجی کنیم؟

    وقتی برنامه توی حالت development یا در حال توسعه هست، ری‌اکت به شکل خودکار تمام propهایی که ما توی کامپوننت استفاده کردیم رو چک می‌کنه تا مطمئن بشه همه‌شون نوع درستی دارن. اگه هر کدوم از propها type درستی نداشته باشن توی کنسول بهمون یه warning نشون میده، البته توی حالت production این حالت غیر فعاله.
    prop‌های اجباری با پراپرتی isRequired مشخص میشن، همچنین یه‌سری انواع prop از پیش تعریف شده وجود دارن که می‌تونیم ازشون استفاده کنیم:

    1. PropTypes.number

    2. PropTypes.string

    3. PropTypes.array

    4. PropTypes.object

    5. PropTypes.func

    6. PropTypes.node

    7. PropTypes.element

    8. PropTypes.bool

    9. PropTypes.symbol

    10. PropTypes.any

    
    

    PropTypeها رو برای یه کامپوننت تستی به اسم User اینطوری میشه تعریف کرد:

    import React from "react";
    import PropTypes from "prop-types";
    
    const User = (props) => {
      return (
        <>
          <h1>{`Welcome, ${props.name}`}</h1>
          <h2>{`Age, ${props.age}`}</h2>
        </>
      );
    }
    
    User.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired,
    };
    

    نکته: در ورژن 15.5 ری‌اکت propTypeها از ‍React.PropType به کتابخونه جدید prop-types انتقال پیدا کردن.

    فهرست

52. مزایای React چیه؟

    1. افزایش عملکرد برنامه با Virtual DOM.

    2. خوندن و نوشتن راحتتر کد‌ها با JSX.

    3. امکان رندر شدن در هر دو سمت کاربر و سرور (SSR).

    4. ادغام راحت با فریم ورک‌ها (Angular, Backbone).

    5. امکان نوشتن تست‌های واحد یا ادغام شده از طریق ابزارهایی مثل Jest.

    فهرست

53. محدودیت‌های React چیه؟

    1. ری‌اکت یک کتابخونه برای ساخت لایه view هستش نه یک فریم‌ورک کامل.

    2. وجود یک منحنی یادگیری(سختی یادگیری یا همون learning curve) برای کسایی که به تازگی می خوان برنامه نویسی وب رو یاد بگیرن.

    3. یکپارچه‌سازی ری‌اکت در فریم‌ورک‌های مبتنی بر MVC به یه کانفیگ اضافه‌ای نیاز داره.

    4. پیچیدگی کد با inline templating و JSX افزایش پیدا‌می‌کنه.

    5. خیلی کامپوننت‌های کوچیک یا boilerplateهای کوچیک براش ساخته شدن و ممکنه کمی گیج کننده باشه.

    فهرست

54. error boundaryها توی ری‌اکت نسخه 16 چیکار می‌کنن؟

    Error boundaryها یا به اصطلاح تحت الفظی مرزهای خطا کامپوننت‌هایی هستن که خطاهای جاواسکریپت رو هرجایی توی درخت فرزنداش رخ داده باشن catch می‌کنن و خطای موردنظر رو log می‌کنن و علاوه براین می‌تونن یه UI به اصطلاح fallback رو بجای کامپوننت crash شده نشون بدن.

    توی یه کلاس کامپوننت با گذاشتن متد componentDidCatch(error, info) یا static getDerivedStateFromError می‌تونیم یه boundary برای زمانی که خطایی رخ میده درست کنیم. مثل:

    class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props);
        this.state = { hasError: false };
      }
    
      componentDidCatch(error, info) {
        // You can also log the error to an error reporting service
        logErrorToMyService(error, info);
      }
    
      static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return { hasError: true };
      }
    
      render() {
        if (this.state.hasError) {
          // You can render any custom fallback UI
          return <h1>{"Something went wrong."}</h1>;
        }
        return this.props.children;
      }
    }
    

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

    <ErrorBoundary>
      <MyWidget />
    </ErrorBoundary>
    

    نکته: از این قابلیت با استفاده از کامپوننت‌های functional نمیشه استفاده کرد و در حقیقت احتمالا نیازی هم بهش ندارین، چون اکثر مواقع برای کل برنامه یه error boundary تعریف می‌کنیم که می‌تونه try..catch باشه.

    فهرست

55. چطوری از error boundaryها توی نسخه 15 ری‌اکت استفاده کنیم؟

    ری‌اکت توی نسخه 15 با استفاده از متد unstabled_handleError error boundaryها رو مدیریت کرده.
    این متد توی نسخه 16 به ‍‍componentDidCatch تغییر کرده.

    فهرست

56. روش‌های پیشنهادی برای type checking چیه؟

    به طور معمول به دو روش میشه نوع prop ورودی در برنامه‌های ری‌اکتی رو چک کرد. روش اول استفاده از کتابخانه prop-types و اعتبارسنجی ورودی‌های کامپوننت‌‌ـه و روش دوم که برای برنامه‌هایی با کد‌های بیشتر توصیه میشه، استفاده از _static type checker_‌هایی مثل flow یا typeScript هست که چک کردن نوع داده رو در زمان توسعه و کامپایل انجام میده ویژگی‌های مثل auto-completion ‌رو ارائه میده.

    فهرست

57. کاربرد پکیج react-dom چیه؟

    پکیج react-dom متدهای DOM-specific یا مخصوص DOM رو ارائه میده که می‌تونه توی سطوح بالای برنامه شما استفاده بشه.
    اکثر کامپوننت‌ها نیازی به استفاده از این ماژول‌ها ندارن. تعدادی از متد‌های این پکیج این‌ها هستن:

    1. متد render

    2. متد hydrate

    3. متد unmountComponentAtNode

    4. متد findDOMNode

    5. متد createPortal

    فهرست

58. کاربرد متد render از پکیج react-dom چیه؟

    این متد برای رندرکردن کامپوننت پاس داده شده، توی یه المنت DOM که به عنوان container پاس داده شده، استفاده میشه و یه رفرنس به کامپوننت برمی‌گردونه. اگه کامپوننت ری‌اکت قبلا توی container مورد نظر رندر شده باشه با یه update فقط DOMهایی که نیازمند به روز شدن باشن رو ری-رندر می‌کنه.

    ReactDOM.render(element, container[, callback])
    

    اگه پارامتر سوم که یه callback هست پاس داده بشه، هر موقع که رندر یا به‌روزرسانی انجام بشه اون تابع هم اجرا میشه.

    فهرست

59. ReactDOMServer چیه؟

    ReactDOMServer این امکان رو بهمون میده که کامپوننت‌ها رو به صورت استاتیک رندر کنیم (معمولا روی node server استفاده میشه). ReactDOMServer عمدتا برای پیاده سازی سمت سرور استفاده میشه (SSR).

    1. متد renderToString

    2. متد renderToStaticMarkup

    برای مثال ممکنه یه سرور روی node بسازین که ممکنه Express، Hapi یا Koa باشه و متد renderToString رو برای تبدیل کردن کامپوننت root به html اجرا کنید و نتیجه بدست اومده رو به عنوان response به کلاینت پاس بدین.

    // using Express
    import { renderToString } from "react-dom/server";
    import MyPage from "./MyPage";
    
    app.get("/", (req, res) => {
      res.write(
        "<!DOCTYPE html><html><head><title>My Page</title></head><body>"
      );
      res.write('<div id="content">');
      res.write(renderToString(<MyPage />));
      res.write("</div></body></html>");
      res.end();
    });
    

    فهرست

60. چطوری از InnerHtml توی ری‌اکت استفاده کنیم؟

    ویژگی dangerouslySetInnerHTML جایگزین ری‌اکت واسه استفاده از innerHTML توی DOM مرورگره و کارکردش درست مثل innerHTML هستش، استفاده از این ویژگی به خاطر حملات cross-site-scripting(XSS) ریسک بالایی داره.
    برای این‌کار باید یه آبجکت innerHTML به عنوان key و یه متن html به عنوان value به این prop بفرستیم(یا شاید همون پاس بدیم).

    توی مثال پایینی کامپوننت از ویژگی dangerouslySetInnerHTML برای قرار دادن HTML استفاده کرده.

    function createMarkup() {
      return { __html: "First · Second" };
    }
    
    function MyComponent() {
      return <div dangerouslySetInnerHTML={createMarkup()} />;
    }
    

    فهرست

61. چطوری توی ری‌اکت استایل‌دهی می‌کنیم؟

    attribute پیش‌فرض مورد استفاده برای استایل‌دهی style هستش که یه object جاواسکریپت رو به عنوان مقدار ورودی دریافت می‌کنه. همه propertyهای اون بجای css عادی camelCase هستن. این روش با استایل‌دهی عادی توی جاواسکریپت یه کم متفاوت، بهینه‌تر و امن‌تره، چون جلوی حفره‌های امنیتی مثل XSS رو میگیره.

    const divStyle = {
      color: "blue",
      backgroundImage: "url(" + imgUrl + ")",
    };
    
    function HelloWorldComponent() {
      return <div style={divStyle}>Hello World!</div>;
    }
    

    فهرست

62. تفاوت eventهای ری‌اکت چیه؟

    مدیریت رویداد‌ها روی اِلمان‌های ری‌اکت یه سری تفاوت‌های کلی با نحوه مدیریت اونا روی js داره:

    1. event handler‌های ری‌اکت به جای حروف کوچیک به صورت حروف بزرگ نام‌گذاری میشن.

    2. با JSX ما یه تابع رو به جای رشته به عنوان event handler پاس میدیم.

    فهرست

63. اگه توی constructor بیاییم و setState کنیم چی میشه؟

    وقتی از setState استفاده می‌کنیم، جدا از اینکه به یه آبجکت استیتی اختصاص داده میشه ری‌اکت اون کامپوننت و همه فرزندای اون کامپوننت رو دوباره رندر می‌کنه. ممکنه این ارور رو بگیرین: شما فقط می تونید کامپوننت mount شده یا در حال mount رو به روز رسانی کنید. پس باید بجای setState از this.state برای مقداردهی state توی constructor استفاده کنیم.
    توی فانکشن کامپوننت‌ها هم اگه داخل بدنه تابع یه setState کنیم، کامپوننت توی حلقه رندر بی‌نهایت می‌افته و خطا می‌گیریم.

    فهرست

64. تاثیر استفاده از ایندکس به عنوان key چیه؟

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

    todos.map((todo, index) => <Todo {...todo} key={index} />);
    

    اگه از داده‌های همون element به عنوان کلید بخوایم استفاده کنیم، مثلا todo.id. چونکه همه ویژگی‌هایی که یه کلید باید داشته باشه رو داره، هم استیبله و هم منحصر به فرد، توی این حالت ری‌اکت می‌تونه بدون اینکه لازم باشه دوباره همه اِلمنت‌ها رو ارزیابی کنه رندر رو انجام بده.

    todos.map((todo) => <Todo {...todo} key={todo.id} />);
    

    فهرست

65. نظرت راجع به استفاده از setState توی متد componentWillMount چیه؟

    توصیه میشه که از مقدار دهی اولیه غیرهمزمان(async) در متد componentWillMount استفاده نشه. componentWillMount درست قبل از mount شدن اجرا میشه و اون لحظه قبل از فراخوانی متد render هست، پس setState کردن توی این متد باعث re-render شدن نمیشه. باید از ایجاد هر ساید افکتی توی این متد خودداری کنیم و دقت کنیم که اگه مقدار دهی اولیه غیر همزمان‌ای داریم این کار رو توی متد componentDidMount انجام بدیم نه در متد componentWillMount.

    componentDidMount() {
      axios.get(`api/todos`)
       .then((result) => {
          this.setState({
            messages: [...result.data]
          })
        })
    }
    

    معادل کد زیر با هوک:

    useEffect(() => {
      axios.get(`api/todos`)
       .then((result) => {
          setMessages([...result.data])
        })
    }, []);
    

    فهرست

66. اگه از prop توی مقداردهی اولیه state استفاده کنیم چی میشه؟

    اگه prop‌های یه کامپوننت بدون اینکه اون کامپوننت رفرش بشه تغییر کنه، مقدار جدید اون prop نمایش داده نمیشه چون state جاری اون کامپوننت رو به روز رسانی نمی‌کنه، مقدار دهی اولیه state از prop‌ها فقط زمانی که کامپوننت برای بار اول ساخته شده اجرا میشه.
    کامپوننت زیر مقدار به روزرسانی شده رو نشون نمیده:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          records: [],
          inputValue: this.props.inputValue,
        };
      }
    
      render() {
        return <div>{this.state.inputValue}</div>;
      }
    }
    

    و نکته جالبش اینه که استفاده از prop‌ها توی متد render مقدار رو به روز رسانی‌می‌کنه:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          record: [],
        };
      }
    
      render() {
        return <div>{this.props.inputValue}</div>;
      }
    }
    

    توی فانکشن کامپوننت‌ها هم دقیقا به همین شکل هست، مقدار اولیه useState اگه از prop ورودی کامپوننت باشه، با تغییر دادن prop مقدار اون state عوض نمیشه، دلیلش هم اینه که هوک useState فقط توی اولین رندر اجرا میشه و بعدش دیگه باید با استفاده از متد setterاش مقدار اون state رو عوض کنیم.

    فهرست

67. چطوری کامپوننت رو با بررسی یه شرط رندر می‌کنیم؟

    بعضی وقتا ما می خوایم کامپوننت‌های مختلفی رو بسته به بعضی state‌ها رندر کنیم. JSX مقدار false یا undefined رو رندر نمیکنه، بنابراین ما می‌تونیم از short-circuiting شرطی برای رندر کردن بخش مشخصی از کامپوننت‌مون استفاده کنیم در صورتی که اون شرط مقدار true رو برگردونده باشه.

    const MyComponent = ({ name, address }) => (
      <div>
        <h2>{name}</h2>
        {address && <p>{address}</p>}
      </div>
    );
    

    اگه به یه شرط if-else نیاز دارین، میتونیم از عبارت شرطی سه‌گانه(ternary operator) استفاده کنیم:

    const MyComponent = ({ name, address }) => (
      <div>
        <h2>{name}</h2>
        {address ? <p>{address}</p>: <p>{"Address is not available"}</p>}
      </div>
    );
    

    فهرست

68. چرا وقتی propها رو روی یه DOM Elemnt می‌آییم spread می‌کنیم باید مراقب باشیم؟

    وقتی ما prop هارو spread می‌کنیم این کارو با ریسک اضافه کردن اتریبیوت‌های HTML انجام میدیم که این کار خوبی نیست، به جای این کار می‌تونیم از...rest استفاده کنیم که فقط prop‌های مورد نیاز رو اضافه‌می‌کنه.

    const ComponentA = () => (
      <ComponentB isDisplay={true} className={"componentStyle"} />
    );
    
    const ComponentB = ({ isDisplay,...domProps }) => (
      <div {...domProps}>{"ComponentB"}</div>
    );
    

    فهرست

69. چطوری از decoratorها توی ری‌اکت استفاده کنیم؟

    می‌تونیم کلاس کامپوننت ها رو decorate کنیم، که درست مثل پاس دادن کامپوننت‌ها به تابع هستش. Decorator‌ها روش قابل خواندن و انعطاف پذیرتری برای تغییر فانکشنالیتی کامپوننت‌ها هستن.

    @setTitle("Profile")
    class Profile extends React.Component {
      //....
    }
    
    /*
      title is a string that will be set as a document title
      WrappedComponent is what our decorator will receive when
      put directly above a component class as seen in the example above
    */
    const setTitle = (title) => (WrappedComponent) => {
      return class extends React.Component {
        componentDidMount() {
          document.title = title;
        }
    
        render() {
          return <WrappedComponent {...this.props} />;
        }
      };
    };
    

    نکته: Decoratorها ویژگی‌هایی هستن که در حال حاضر به ES7 اضافه نشدن، ولی توی پیشنهاد stage 2 هستن.

    فهرست

70. چطوری یه کامپوننت رو memoize می‌کنیم؟

    در حال حاضر کتابخانه‌هایی وجود داره که با هدف memoize کردن ایجاد شدن و می‌تونن توی کامپوننت‌های تابع استفاده بشن، به عنوان مثال کتابخونه moize می‌تونه یه کامپوننت رو توی بقیه کامپوننت‌ها memoize کنه.

    import moize from "moize";
    import Component from "./components/Component"; // this module exports a non-memoized component
    
    const MemoizedFoo = moize.react(Component);
    
    const Consumer = () => {
      <div>
        {"I will memoize the following entry:"}
        <MemoizedFoo />
      </div>;
    };
    

    به روز رسانی: توی ورژن 16.6.0 ری‌اکت ،React.memo رو داریم که کارش اینه که یه کامپوننت با الویت بالاتر فراهم‌می‌کنه که کامپوننت رو تا زمانی که prop‌ها تغییر کنن، memoize می‌کنه. برای استفاده ازش کافیه زمان ساخت کامپوننت از React.memo استفاده کنیم.

    const MemoComponent = React.memo(function MemoComponent(props) {
      /* render using props */
    });
    // OR
    export default React.memo(MyFunctionComponent);
    

    فهرست

71. چطوری باید Server-Side Rendering یا SSR رو توی ری‌اکت پیاده کنیم؟

    ری‌اکت در حال حاضر به رندر سمت نود سرور مجهزه، یه ورژن خاصی از DOM رندر در دسترسه که دقیقا از همون الگوی سمت کاربر پیروی می‌کنه.

    import ReactDOMServer from "react-dom/server";
    import App from "./App";
    
    ReactDOMServer.renderToString(<App />);
    

    خروجی این روش یه HTML معمولی به صورت یه رشته‌ست که داخل body صفحه به عنوان response سرور قرار می‌گیره.
    در سمت کاربر، ری‌اکت محتوای از قبل رندر شده رو تشخیص میده و به صورت فرآیند همگام‌سازی با اونا رو انجام میده(rehydration).

    فهرست

72. چطوری حالت production رو برای ری‌اکت فعال کنیم؟

    میشه از پلاگین DefinePlugin که روی وب‌پک قابل استفاده هست استفاده کرد و مقدار NODE_ENV رو روی production‌ستکرد، با اینکار خطاهای اضافی یا اعتبارسنجی propTypeها روی پروداکشن غیرفعال میشه و جدای این موارد، کدهای نوشته شده بهینه‌سازی میشن و مثلا کدهای بلااستفاده حذف میشن، کم حجم‌سازی انجام میشه و درنتیجه سرعت بهتری رو می‌توته به برنامه بده چون سایز bundle ایجاد شده کوچیکتر خواهد بود.

    فهرست

73. CRA چیه و چه مزایایی داره؟

    ابزار CLI(محیط کدهای دستوری) create-react-app این امکان رو بهمون میده که برنامه‌های ری‌اکت رو سریع و بدون مراحل پیکربندی بسازیم و اجرا کنیم.

    مثلا، بیاین برنامه Todo رو با استفاده از CRA بسازیم:

    # Installation
    $ npm install -g create-react-app
    
    # Create new project
    $ create-react-app todo-app
    $ cd todo-app
    
    # Build, test and run
    $ npm run build
    $ npm run test
    $ npm start
    

    این شامل همه اون چیزیه که ما واسه ساختن یه برنامه ری‌اکت لازم داریم:

    1. React، JSX، ES6 و روند پشتیبانی syntax.

    2. موارد اضافی زبان شامل ES6 و عملگر object spread و اینا.

    3. Autoprefixed CSS، بنابراین نیازی به -webkit- یا پیشوند‌های دیگه‌ای نداریم.

    4. یه اجرا کننده تست تعاملی با پشتیبانی داخلی برای coveraage reporting.

    5. یه سرور live development که اشتباهات معمول رو بهمون هشدار میده.

    6. یه اسکریپت بیلد برای پک و باندل کردن css، js و تصاویر برای production همراه با hash‌ها و sourcemap ها.

    فهرست

74. ترتیب اجرا شدن متد‌های life cycle چطوریه؟

    وقتی یه نمونه‌ای از کامپوننت ساخته میشه و داخل DOM اضافه میشه، متد‌های lifecycle به ترتیب زیر صدا زده میشن.

    1. متد constructor

    2. متد static getDerivedStateFromProps

    3. متد render

    4. متد componentDidMount

    فهرست

75. کدوم متد‌های life cycle توی نسخه 16 ری‌اکت منسوخ شدن؟

    متد‌های lifecycle روش‌های ناامن کدنویسی هستن و با رندر async مشکل بیشتری پیدا می‌کنن.

    1. متد componentWillMount

    2. متد componentWillReceiveProps

    3. متد componentWillUpdate

    تو ورژن 16.3 ری‌اکت این متدها با پیشوند UNSAFE_ متمایز شدن و تو نسخه 17 ری‌اکت حذف شد.

    فهرست

76. کاربرد متد getDerivedStateFromProps چیه؟

    بعد از اینکه یه کامپوننت بلافاصله بدون خطا و مثل قبل rerender شد، متد استاتیک getDerivedStateFromProps صدا زده میشه.
    این متد یا state آپدیت شده رو به صورت یه آبجکت برمی گردونه یا null رو برمی گردونه که معنیش اینه prop‌های جدید به آپدیت شدن state نیازی ندارن.

    class MyComponent extends React.Component {
      static getDerivedStateFromProps(props, state) {
        //...
      }
    }
    

    متد componentDidUpdate تمام مواردی که توی متد componentWillReceiveProps هست رو پوشش میده.

    فهرست

77. کاربرد متد getSnapshotBeforeUpdate چیه؟

    متد جدید getSnapshotBeforeUpdate بعد از آپدیت‌های DOM صدا زده میشه.
    مقدار برگشتی این متد به عنوان پارامتر سوم به متد componentDidUpdate پاس داده میشه.

    class MyComponent extends React.Component {
      getSnapshotBeforeUpdate(prevProps, prevState) {
        //...
      }
    }
    

    متد componentDidUpdate تمام مواردی که توی متد componentWillUpdate استفاده میشه رو پوشش میده.

    فهرست

78. آیا هوک‌ها جای render props و HOC رو می‌گیرن؟

    هوک‌ها می‌تونن بسیاری از نیازهای ما رو موقع تولید کامپوننت‌های ری‌اکتی حل کنن.
    کامپوننت‌های با اولویت بالاتر و render prop‌ها هر دوشون فقط یه child رو رندر می‌کنن ولی هوک‌ها روش راحت تری رو ارائه میدن که از تودرتو بودن درخت کامپوننت‌ها جلوگیری می‌کنه.

    فهرست

79. روش توصیه شده برای نام‌گذاری کامپوننت‌ها چیه؟

    برای نام گذاری کامپوننت‌ها توصیه میشه که از نام‌گذاری هنگام export گرفتن به جای displayName استفاده کنیم. استفاده از displayName برای نام گذاری کامپوننت:

    export default React.createClass({
      displayName: "TodoApp",
      //...
    });
    

    روش توصیه شده:

    const TodoApp = () => ();
    
    export default TodoApp;
    

    فهرست

80. روش توصیه شده برای ترتیب متدها در کلاس کامپوننت‌ها چیه؟

    ترتیب توصیه شده متد‌ها از mounting تا render stage:

    1. متد‌های static

    2. متد constructor

    3. متد getChildContext

    4. متد componentWillMount

    5. متد componentDidMount

    6. متد componentWillReceiveProps

    7. متد shouldComponentUpdate

    8. متد componentWillUpdate

    9. متد componentDidUpdate

    10. متد componentWillUnmount

    11. event handlerها مثل onClickSubmit یا onChangeDescription

    12. متد‌های دریافت کننده برای رندر مثل getSelectReason یا getFooterContent

    13. متد‌های رندر اختیاری مثل renderNavigation یا renderProfilePicture

    14. متد render

    فهرست

81. کامپوننت تعویض کننده یا switching چیه؟

    یه کامپوننت switcher کامپوننتی‌ـه که یکی از چندتا کامپوننت موردنظر رو رندر می‌کنه. لازمه که برای تصمیم گیری بین کامپوننت‌ها از object جاواسکریپتی استفاده کنیم.

    برای مثال، کدپایین با بررسی prop موردنظر page بین صفحات مختلف سويیچ می‌کنه:

    import HomePage from "./HomePage";
    import AboutPage from "./AboutPage";
    import ServicesPage from "./ServicesPage";
    import ContactPage from "./ContactPage";
    
    const PAGES = {
      home: HomePage,
      about: AboutPage,
      services: ServicesPage,
      contact: ContactPage,
    };
    
    const Page = (props) => {
      const Handler = PAGES[props.page] || ContactPage;
    
      return <Handler {...props} />;
    };
    
    // The keys of the PAGES object can be used in the prop types to catch dev-time errors.
    Page.propTypes = {
      page: PropTypes.oneOf(Object.keys(PAGES)).isRequired,
    };
    

    فهرست

82. چرا نیاز میشه به تابع setState یه فانکشن callback پاس بدیم؟

    دلیلش اینه که setState یه عملیات async یا ناهمزمانه.
    state‌ها در ری‌اکت به دلایل عملکردی تغییر می‌کنن، بنابراین یه state ممکنه بلافاصله بعد از اینکه ‍setState صدا زده شد تغییر نکنه.
    یعنی اینکه وقتی setState رو صدا می زنیم نباید به state جاری اعتماد کنیم چون نمی‌تونیم مطمئن باشیم که اون state چی می‌تونه باشه.
    راه حلش اینه که یه تابع رو با state قبلی به عنوان یه آرگومان به setState پاس بدیم.

    بیاین فرض کنیم مقدار اولیه count صفر هستش. بعد از سه عملیات پشت هم، مقدار count فقط یکی افزایش پیدا می‌کنه.

    const [count, setCount] = useState(0);
    
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    // count === 1, not 3
    

    اگه ما یه تابع به setState پاس بدیم، مقدار count به درستی افزایش پیدا می‌کنه.

    this.setState((prevState, props) => ({
      count: prevState.count + props.increment,
    }));
    // this.state.count === 3 as expected
    

    فهرست

83. حالت strict توی ری‌اکت چیکار می‌کنه؟

    React.StrictMode یه کامپوننت مفید برای هایلایت کردن مشکلات احتمالی توی برنامه ست.
    <StrictMode> درست مثل ‍‍<Fragment> هیچ المان DOM اضافه‌ای رو رندر نمی‌کنه، بلکه warning‌ها و additional checks رو برای فرزندان اون کامپوننت فعال‌می‌کنه.
    این کار فقط در حالت development فعال میشه.

    import React from "react";
    
    function ExampleApplication() {
      return (
        <div>
          <Header />
          <React.StrictMode>
            <div>
              <ComponentOne />
              <ComponentTwo />
            </div>
          </React.StrictMode>
          <Footer />
        </div>
      );
    }
    

    توی مثال بالا، strict mode فقط روی دو کامپوننت <ComponentOne> و <ComponentTwo> اعمال میشه.

    فهرست

84. Mixin‌های ری‌اکت چی هستن؟

    _Mixin_‌ها روشی برای جدا کردن کامپوننت‌هایی با عملکرد مشترک بودن. با توسعه یافتن ری‌اکت دیگه Mixin‌ها نباید استفاده بشن و می‌تونن با کامپوننت‌های با اولویت بالا(HOC) یا _decorator_‌ها جایگزین بشن.

    یکی از بیشترین کاربرد‌های mixin‌ها PureRenderMixin بود. ممکنه تو بعضی از کامپوننت‌ها برای جلوگیری از re-render‌های غیر ضروری وقتی prop‌ها و state با مقادیر قبلی شون برابر هستن از این mixin‌ها استفاده کنیم:

    const PureRenderMixin = require("react-addons-pure-render-mixin");
    
    const Button = React.createClass({
      mixins: [PureRenderMixin],
      //...
    });
    

    نکته مهم: mixinهای ری‌اکت منقضی شدن و دیگه کاربردی ندارن، این سوال فقط برای افزایش آگاهی توی کتاب باقی می‌مونه.

    فهرست

85. چرا isMounted آنتی پترن هست و روش بهتر انجامش چیه؟

    کاربرد اصلی متد isMounted برای جلوگیری از فراخوانی setState بعد از unmount شدن کامپوننت هستش چونکه باعث ایجاد یه خطا میشه.
    خطاش یه چیزی مثل اینه:

    Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
    

    توی کلاس کامپوننت‌ها هم این شکلی بعضا جلوشو می‌گرفتن:

    if (this.isMounted()) {
      this.setState({...})
    }
    

    دلیل اینکه این روش توصیه نمیشه اینه که خطایی رو که ری‌اکت بهمون میداد رو داره دور میزنه و حلش نمی‌کنه. بهتره setState رو جایی انجام بدیم که توی مواقعی که کامپوننت‌ mount نیست اجرا نشه.

    البته توی نسخه‌های جدید ری‌اکت این کار رو خیلی ساده‌تر میشه انجام داد و فقط کافیه یه هوکی بنویسیم که یه ref رو مقداردهی می‌کنه و بعد با بررسی اون ref میشه فهمید که کامپوننت mount شده یا نه، مثلا:

    export const useIsMounted = () => {
      const componentIsMounted = useRef(true);
      useEffect(
        () => () => {
          componentIsMounted.current = false;
        },
        []
      );
      return componentIsMounted;
    };
    

    یا حتی یه پکیجی ساخته شده به اسم ismounted که می‌تونه بهمون کمک کنه که متوجه بشیم کامپوننت mount شده یا نه. ولی حواسمون باشه که ازش درست استفاده کنیم.

    فهرست

86. پشتیبانی ری‌اکت از pointer eventها چطوریه؟

    _pointer Event_‌ها یه روش واحدی رو برای هندل کردن همه ی ایونت‌های ورودی ارائه میدن.
    در زمان‌های قدیم ما از موس استفاده میکردیم و برای هندل کردن ایونت‌های مربوط به اون از event listener‌ها استفاده میکردیم ولی امروزه دستگاه‌های زیادی داریم که با داشتن موس ارتباطی ندارن، مثل قلم‌ها یا گوشی‌های صفحه لمسی.
    باید یادمون باشه که این ایونت‌ها فقط تو مرورگر‌هایی کار می‌کنن که مشخصه Pointer Events رو پشتیبانی می‌کنن.

    ایونت‌های زیر در React DOM در دسترس هستن:

    1. onPointerDown

    2. onPointerMove

    3. onPointerUp

    4. onPointerCancel

    5. onGotPointerCapture

    6. onLostPointerCapture

    7. onPointerEnter

    8. onPointerLeave

    9. onPointerOver

    10. onPointerOut

    فهرست

87. چرا باید اسم کامپوننت با حرف بزرگ شروع بشه؟

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

    class SomeComponent extends Component {
      // Code goes here
    }
    

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

    class myComponent extends Component {
      render() {
        return <div />;
      }
    }
    
    export default myComponent;
    

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

    import MyComponent from "./MyComponent";
    

    فهرست

88. آیا propهای custom توی ری‌اکت پشتیبانی میشن؟

    بله. اون قدیما ری‌اکت DOM attribute‌های ناشناخته رو نادیده می‌گرفت، اگه JSX رو با یه ویژگی‌ای نوشته بودیم که ری‌اکت تشخیص نمی‌داد، اونو نادیده می‌گرفت. به عنوان مثال:

    <div mycustomattribute="something" />
    

    در ری‌اکت ورژن 15 یه div خالی توی DOM رندر می‌کنیم:

    <div />
    

    در ری‌اکت ورژن 16 هر attribute ناشناخته‌ای توی DOM از بین میره:

    <div mycustomattribute="something" />
    

    این برای attribute‌های غیر استاندارد مرورگر‌های خاص، DOM API‌های جدید و ادغام با کتابخانه‌های third-party مفیده.

    فهرست

89. تفاوت‌های constructor و getInitialState چیه؟

    وقتی داریم از کلاس‌های ES6 استفاده می‌کنیم باید state‌ رو توی constructor مقداردهی اولیه کنیم و وقتی از React.createClass استفاده می‌کنیم باید از متد getInitialState استفاده کنیم.

    استفاده از کلاس‌های ES6:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          /* initial state */
        };
      }
    }
    

    استفاده از React.createClass:

    const MyComponent = React.createClass({
      getInitialState() {
        return {
          /* initial state */
        };
      },
    });
    

    نکته: React.createClass در ورژن 16 ری‌اکت حذف شده و به جای اون میشه از کلاس‌های ساده جاواسکریپت استفاده کرد.

    فهرست

90. می‌تونیم یه کامپوننت رو بدون setState ری‌رندر کنیم؟

    در حالت پیش فرض، وقتی state یا prop کامپوننت تغییر‌ می‌کنه، کامپوننت دوباره رندر میشه. اگه متد render به داده‌های دیگه‌ای وابسته باشه، توی فانکشن کامپوننت‌ها می‌تونیم یه state تعریف کنیم و با ست کردن یه مقدار جدید توی اون state عامدانه باعث رندر مجدد کامپوننت بشیم. مثل:

    const [tick, setTick] = useState(0);
    
    const reRender = () => setTick(tick => tick++);
    

    توی مثال بالا ما یه تابع تولید کردیم که با هر بار فراخوانی اون، می‌تونیم انتظار رندر شدن کامپوننت رو داشته باشیم.

    توی کلاس کامپوننت‌ها، می‌تونیم با فراخوانی متد forceUpdate به ری‌اکت بگیم که این کامپوننت نیازه که دوباره رندر بشه.

    component.forceUpdate(callback);
    

    توصیه میشه که از متد ‍‍forceUpdate استفاده نکنیم و توی render فقط از this.props و this.state استفاده کنیم.

    فهرست

91. تفاوت‌های فراخوانی super() و super(props) توی کلاس کامپوننت‌های ری‌اکت چیه؟

    اگه بخوایم به this.props توی constructor دسترسی پیدا کنیم باید propها رو از طریق متد ‍‍‍super پاس بدیم.

    استفاده از super(props):

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        console.log(this.props); // { name: 'John',... }
      }
    }
    

    استفاده از super:

    class MyComponent extends React.Component {
      constructor(props) {
        super();
        console.log(this.props); // undefined
      }
    }
    

    بیرون از constructor هردو متد مقادیر یکسانی رو برای this.props نشون میدن.

    فهرست

92. چطوری توی JSX حلقه یا همون لوپ رو داشته باشیم؟

    خیلی ساده می‌تونیم از ‍‍Array.prototype.map با سینتکس _arrow توابع _ ES6 استفاده کنیم، برای مثال آرایه‌ای از آیتم‌های یه آبجکت توی آرایه‌ای از کامپوننت‌ها نوشته میشه:

    <tbody>
      {items.map((item) => (
        <SomeComponent key={item.id} name={item.name} />
      ))}
    </tbody>
    

    نمی‌تونیم با استفاده از حلقه for تکرار رو انجام بدیم:

    <tbody>
      for (let i = 0; i < items.length; i++) {
        <SomeComponent key={items[i].id} name={items[i].name} />
      }
    </tbody>
    

    به خاطر اینکه تگ‌های JSX داخل function calls تبدیل میشن ما نمی‌تونیم از statement‌ها داخل عبارات استفاده کنیم.

    فهرست

93. توی attributeها چطوری به prop دسترسی داشته باشیم؟

    ری‌اکت و در حقیقت JSX داخل یه attribute استفاده از متفیر به شکل عادی رو پشتیبانی نمی‌کنه.
    مثلا کد پایین کار نمی‌کنه:

    <img className="image" src="images/{this.props.image}" />
    

    اما ما می‌تونیم هر عبارت js رو داخل کرلی براکت({}) به عنوان مقدار کلی attribute قرار بدیم.
    مثلا، تکه کد پایین کار ‌می‌کنه:

    <img className="image" src={"images/" + props.image} />
    

    با استفاده از template strings هم می‌تونیم بنویسیم:

    <img className="image" src={`images/${this.props.image}`} />
    

    فهرست

94. چطوری یه PropType برای ‌آرایه‌ای از objectها با shape داشته باشیم؟

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

    ReactComponent.propTypes = {
      arrayWithShape: React.PropTypes.arrayOf(
        React.PropTypes.shape({
          color: React.PropTypes.string.isRequired,
          fontSize: React.PropTypes.number.isRequired,
        })
      ).isRequired,
    };
    

    فهرست

95. چطوری classهای یه المنت رو به صورت شرطی رندر کنیم؟

    نباید از کرلی براکت({}) داخل کوتیشن('') استفاده کنیم چون به عنوان یه رشته در نظر گرفته میشه.

    <div className="btn-panel {this.props.visible ? 'show': 'hidden'}">
    

    به جاش می‌تونیم کرلی بریس رو به بیرون انتقال بدیم. (فراموش نکنیم که از space بین className‌ها استفاده کنیم.)

    <div className={'btn-panel ' + (this.props.visible ? 'show': 'hidden')}>
    

    با استفاده از Template strings هم می‌تونیم بنویسیم:

    <div className={`btn-panel ${this.props.visible ? 'show': 'hidden'}`}>
    

    فهرست

96. تفاوت‌های React و ReactDOM چیه؟

    پکیج ری‌اکت شامل React.createElement، React.Component، React.Children و helperهای دیگه که مربوطه به کلاس کامپوننت‌ها و المنت‌ها هستش. می‌تونیم اینا رو به عنوان isomorphic یا universal helpers که واسه ساختن کامپوننت‌ها نیاز داریم, در نظر بگیریم.
    پکیج ‍‍react-dom شامل ReactDOM.render میشه و داخل react-dom/server می‌تونیم با استفاده از متد‌های ReactDOMServer.renderToString و ReactDOMServer.renderToStaticMarkup server-side rendering رو پشتیبانی کنیم.

    فهرست

97. چرا ReactDOM رو از React جدا کردن؟

    تیم ری‌اکت سعی کرده تمام ویژگی‌های مرتبط با DOM رو جدا کنه و اونا رو توی یه کتابخونه جدا به اسم ReactDom قرار بده. ری‌اکت ورژن ۱۴ اولین نسخه‌ای بود که توش این کتابخونه‌ها از هم جدا شدن. با یه نگاه به بعضی از پکیج‌های ری‌اکت مثل react-native، react-art، react-canvas و react-three مشخص میشه که زیبایی و جوهر ری‌اکت هیچ ربطی به مرورگر‌ها یا DOM نداره. برای ساختن محیط‌های بیشتری که ری‌اکت بتونه رندر بشه، تیم ری‌اکت اومد و پکیج اصلی ری‌اکت رو به دو بخش تقسیم کنه: react و ‍‍react-dom.
    از این طریق تونست کامپوننت‌هایی تولید کنه بین ری‌اکت وب و ری‌اکت نیتیو و... قابل اشتراک باشه.

    فهرست

98. چطوری از label تو ری‌اکت استفاده کنیم؟

    اگه سعی کنیم که با استفاده از for attribute یه عنصر <label> متصل به یه متن رو رندر کنیم، اون وقت ویژگی HTML بودن رو از دست میده و یه خطا توی کنسول بهمون نشون میده.

    <label for={'user'}>{'User'}</label>
    <input type={'text'} id={'user'} />
    

    از اونجایی که for یه کلمه کلیدی رزرو شده توی جاواسکریپته، به جاش باید از htmlFor استفاده کنیم.

    <label htmlFor={'user'}>{'User'}</label>
    <input type={'text'} id={'user'} />
    

    فهرست

99. چطوری می‌تونیم چندتا object از استایل‌های درون خطی رو با هم ترکیب کنیم؟

    می‌تونیم از spread operator توی ری‌اکت استفاده کنیم:

    <button style={{...styles.panel.button,...styles.panel.submitButton }}>
      {"Submit"}
    </button>
    

    اگه داریم از ریکت نیتیو استفاده می‌کنیم می‌تونیم از شکل آرایه‌ای استایل‌ها استفاده کنیم:

    <button style={[styles.panel.button, styles.panel.submitButton]}>
      {"Submit"}
    </button>
    

    فهرست

100. چطوری با resize شدن مرورگر یه ویو رو ری‌رندر کنیم؟

     می‌تونیم به رخداد resize توی componentDidMount گوش کنیم و ابعاد(width و height) رو تغییر بدیم. البته باید حواسمون باشه که این listener رو باید توی متد componentWillUnmount حذفش کنیم.

     class WindowDimensions extends React.Component {
       constructor(props) {
         super(props);
         this.updateDimensions = this.updateDimensions.bind(this);
       }
     
       componentWillMount() {
         this.updateDimensions();
       }
     
       componentDidMount() {
         window.addEventListener("resize", this.updateDimensions);
       }
     
       componentWillUnmount() {
         window.removeEventListener("resize", this.updateDimensions);
       }
     
       updateDimensions() {
         this.setState({
           width: window.innerWidth,
           height: window.innerHeight,
         });
       }
     
       render() {
         return (
           <span>
             {this.state.width} x {this.state.height}
           </span>
         );
       }
     }
     

     همین کار رو با استفاده از هوک‌ها هم میشه انجام داد و برای این کار همین کد رو توی useEffect می‌نویسیم.

     const [dimensions, setDimensions] = useState();
     useEffect(() => {
       window.addEventListener("resize", updateDimensions);
     
       function updateDimensions() {
         setDimensions({
           width: window.innerWidth,
           height: window.innerHeight,
         });
       }
     
       return () => {
         window.removeEventListener("resize", updateDimensions);
       };
     }, []);
     
     return (
       <span>
         {this.state.width} x {this.state.height}
       </span>
     );
     

     فهرست

101. تفاوت متدهای setState و replaceState چیه؟

     وقتی که از متد setState روی کلاس کامپوننت استفاده می‌کنیم، مقادیر فعلی و قبلی با هم ترکیب می‌شن. replaceState حالت فعلی رو با stateای که می‌خواییم جایگزینش می‌کنه. معمولا اگه از setState برای جایگزین کردن استفاده کنیم، همه کلید‌های قبلی رو پاک کنیم. البته میشه بجای استفاده از replaceState با استفاده از setState بیاییم و state رو برابر با false یا null قرار بدیم.

     فهرست

102. چطوری به تغییرات state گوش بدیم؟

     توی کلاس کامپوننت‌ها هنگام به روز شدن state یه سری متدها فراخوانی میشه. با استفاده از این متدها میشه state و prop فعلی رو با مقادیر جدید مقایسه کرده و یه سری کار که مدنظر داریم رو انجام بدیم.

     componentWillUpdate(object nextProps, object nextState)
     componentDidUpdate(object prevProps, object prevState)
     

     با استفاده از هوک useEffect هم این امکان بسادگی قابل انجامه و فقط کافیه به dependencyهای این هوک متغیر مربوط به state رو بدیم.

     const [someState, setSomeState] = useState();
     useEffect(() => {
       // code
     }, [someState]);
     

     فهرست

103. روش توصیه شده برای حذف یک عنصر از آرایه توی state چیه؟

     استفاده از متد Array.prototype.filter آرایه‌ها روش خوبیه.

     برای مثال می‌تونیم یه تابع به اسم removeItem برای به روز کردن state به شکل زیر در نظر بگیریم.

     removeItem(index) {
       this.setState({
         data: this.state.data.filter((item, i) => i !== index)
       })
     }
     

     فهرست

104. امکانش هست که ری‌اکت رو بدون رندر کردن HTML استفاده کنیم؟

     توی نسخه‌های بالاتر از (>=16.2) میشه. برای مثال تکه کد پایین یه سری مثال برای رندر کردن یه مقدار غیر htmlای هست:

     render() {
       return false
     }
     

     render() {
       return null
     }
     

     render() {
       return []
     }
     

     render() {
       return <React.Fragment></React.Fragment>
     }
     

     render() {
       return <></>
     }
     

     البته حواستون باشه که return کردن undefined کار نخواهد کرد.

     فهرست

105. چطوری میشه با ری‌اکت یه JSON به شکل beautify شده نشون داد؟

     میشه گفت زیاد ربطی به ری‌اکت یا غیر ری‌اکت بودن برنامه نداره ولی در کل میشه با استفاده از تگ <pre> و استفاده از optionهای متد JSON.stringify این کار رو انجام داد:

     const data = { name: "John", age: 42 };
     
     class User extends React.Component {
       render() {
         return <pre>{JSON.stringify(data, null, 2)}</pre>;
       }
     }
     
     React.render(<User />, document.getElementById("container"));
     

     فهرست

106. چرا نمی‌تونیم prop رو آپدیت کنیم؟

     فلسفه ساختاری ری‌اکت به شکلیه که propها باید immutable باشن و از بالا به پایین و به صورت سلسه‌مراتبی مقدار بگیرند. به این معنی که پدر هر کامپوننت می‌تونه هر مقداری رو به فرزند پاس بده و فرزند حق دستکاری اونو نداره.

     فهرست

107. چطوری می‌تونیم موقع لود صفحه روی یه input فوکوس کنیم؟

     میشه با ایجاد یه ref برای المنت input و استفاده از اون توی componentDidMount یا useEffect این‌کار رو کرد:

     const App = () => {
       const nameInputRef = useRef();
       useEffect(() => {
         nameInputRef.current.focus();
       }, []);
     
       return (
         <div>
           <input defaultValue={"Won't focus"} />
           <input ref={nameInputRef} defaultValue={"Will focus"} />
         </div>
       );
     };
     

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

     class App extends React.Component {
       componentDidMount() {
         this.nameInput.focus();
       }
     
       render() {
         return (
           <div>
             <input defaultValue={"Won't focus"} />
             <input
               ref={(input) => (this.nameInput = input)}
               defaultValue={"Will focus"}
             />
           </div>
         );
       }
     }
     
     ReactDOM.render(<App />, document.getElementById("app"));
     

     فهرست

108. روش‌های ممکن برای آپدیت کردن object توی state کدوما هستن؟

     1. فراخوانی متد setState با استفاده از یه object برای ترکیب شدن اون:

     • استفاده از Object.assign برای ایجاد یه کپی از object:

     const user = Object.assign({}, this.state.user, { age: 42 });
     this.setState({ user });
     

     • استفاده از عملگر spread:

     const user = {...this.state.user, age: 42 };
     this.setState({ user });
     

     2. فراخوانی setState با یه تابع callback: به این شکل میشه پیاده‌سازی کرد:

     this.setState((prevState) => ({
       user: {
        ...prevState.user,
         age: 42,
       },
     }));
     

     فهرست

109. چرا توابع به جای object در setState ترجیح داده می‌شوند؟

     ری‌اکت اجازه ترکیب کردن تغییرات state رو با استفاده از متد setState فراهم کرده، همین موضوع باعث بهبود پرفورمنس میشه. توی کلاس کامپوننت‌ها this.props و this.state ممکنه به صورت asynchronous و همزمان به روز بشن، نباید به مقدار اونا برای محاسبه مقدار بعدی اعتماد کرد.

     برای مثال به این شمارنده که درست کار نمی‌کنه دقت کنیم:

     // Wrong
     this.setState({
       counter: this.state.counter + this.props.increment,
     });
     

     روش توصیه شده فراخوانی متد setState با یه تابع بجای object هست. این تابع مقدار state قبلی رو به عنوان پارامتر اول و prop رو به عنوان ورودی دوم می‌گیره و این تابع رو زمانی که مقادیر ورودیش تغییر پیدا کنن فراخوانی می‌کنه.

     // Correct
     this.setState((prevState, props) => ({
       counter: prevState.counter + props.increment,
     }));
     

     فهرست

110. چطوری می‌‌تونیم نسخه ری‌اکت جاری رو توی محیط اجرایی بفهمیم؟

     خیلی ساده میشه از مقدار React.version برای گرفتن نسخه جاری استفاده کرد.

     const REACT_VERSION = React.version;
     
     ReactDOM.render(
       <div>{`React version: ${REACT_VERSION}`}</div>,
       document.getElementById("app")
     );
     

     فهرست

111. روش‌های لود کردن polyfill توی CRA کدوما هستن؟

     1. import دستی از core-js:

        یه فایل ایجاد کنیم و اسمشو بزاریم (یه چیزی مثل) polyfills.js و توی فایلindex.js بیایید import کنیمش. کد npm install core-js یا yarn add core-js رو اجرا کنیم و ویژگی‌هایی که لازم داریم رو از corejs بارگذاری کنیم.

     import "core-js/fn/array/find";
     import "core-js/fn/array/includes";
     import "core-js/fn/number/is-nan";
     

     2. استفاده از سرویس Polyfill:

        از سایت polyfill.io CDN واسه گرفتن مقدار شخصی سازی شده براساس مرورگر هر فرد استفاده کنیم و خیلی ساده یه خط کد به index.html اضافه کنیم:

     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>
     

     مثلا توی تکه کد فوق ما برای polyfill کردن Array.prototype.includes درخواست دادیم.

     فهرست

112. توی CRA چطوری از https به‌جای http استفاده کنیم؟

     برای این‌کار لازمه که کانفیگ HTTPS=true رو برای env جاری ‌ست کنیم، برای این‌کار حتی لازم هم نیست فایل .env بسازیم و می‌تونیم توی فایل package.json بخش scripts رو به شکل پایین تغییر بدیم:

     "scripts": {
       "start": "set HTTPS=true && react-scripts start"
     }
     

     یا حتی به شکل set HTTPS=true && npm start هم میشه تغییر داد.

     فهرست

113. توی CRA چطوری میشه از مسیر‌های طولانی برای ایمپورت جلوگیری کرد؟

     یه فایل به اسم .env توی مسیر اصلی پروژه ایجاد می‌کنیم و مسیر مورد نظر خودمون رو اونجا می‌نویسم:

     NODE_PATH=src/app
     

     بعد از این تغییر سرور develop رو ریستارت می‌کنیم بعدش دیگه می‌تونیم هر چیزی رو از مسیر src/app بارگذاری کنیم و لازم هم نباشه مسیر کاملشو بهش بدیم. این‌کار رو میشه با بخش module resolve توی webpack هم انجام داد.

     فهرست

114. چطوری میشه Google Analytics رو به react-router اضافه کرد؟

     یه listener به آبجکت history اضافه می‌کنیم تا بتونیم لود شدن صفحه رو track کنیم:

     history.listen(function (location) {
       window.ga("set", "page", location.pathname + location.search);
       window.ga("send", "pageview", location.pathname + location.search);
     });
     

     توی نسخه ۶ از react-router-dom دسترسی مستقیم به history برداشته شده تا پشتیبانی از suspense راحت‌تر باشه، توی این نسخه میشه از useLocation به شکل زیر استفاده کرد:

     const location = useLocation();
     
     useEffect(() => {
       window.ga("set", "page", location);
       window.ga("send", "pageview", location);
     }, [location]);
     

     فهرست

115. چطوری یه کامپوننت رو هر ثانیه به روز کنیم؟

     لازمه که از setInterval استفاده کنیم تا تغییرات رو اعمال کنیم و البته حواسمون هست که موقع unmount این interval رو حذف کنیم که باعث memory leak نشه.

     const intervalRef = useRef();
     
     useEffect(() => {
        intervalRef.current = setInterval(() => this.setState({ time: Date.now() }), 1000);
     
        return () => {
          clearInterval(intervalRef.current);
        }
     }, [location]);
     

     توی کلاس کامپوننت هم به شکل:

     componentDidMount() {
       this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000)
     }
     
     componentWillUnmount() {
       clearInterval(this.interval)
     }
     

     فهرست