react notes68to85

• چرخه حیات کامپوننت : باید بفهمیم کد های ما کی و به چه صورت render می شوند که در این قسمت به این موضوع میپردازیم . ما سه نوع چرخه حیات برای کامپوننت ها داریم: چرخه حیات ساخت کامپوننت Mount ، آپدیت کامپوننت و unMount شدن کامپوننت . در این لینک میتوانیم دیاگرام چرخه حیات را در یک نگاه ببیینیم : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ .

هوک ها در واقع تابع هایی هستند که برای اضافه کردن امکانات کامپوننت کلاسی به تابعی در کامپوننت های نوع تابعی مورد استفاده قرار میگیرند . همانطور که هوک useState جهت استفاده از امکان state در کامپوننت نوع تابعی مورد استفاده قرار میگرد ، هوک useEffect نیز جهت استفاده از چرخه حیات مورد استفاده قرار میگیر . در مثال زیر نحوه پیاده سازی mount , didmount, update در هوک useeffect را مشاهده خواهید کرد:

import React, { useEffect, useState } from 'react';

const MyComponent = () => {

  // State to track some data

  const [data, setData] = useState([]);

  // useEffect for component mount (equivalent to componentDidMount)

  useEffect(() => { در دل خودش یک کال بک داره

    // Code to run when the component mounts

    console.log('Component mounted');

    // Fetch data or perform any initial setup

    fetchData();

    // Cleanup function (equivalent to componentWillUnmount)

    return () => {

      console.log('Component will unmount');

      // Perform cleanup tasks if needed

    };

  }, []); // Empty dependency array means it runs only on mount

  // useEffect for component update (equivalent to componentDidUpdate)

  useEffect(() => {

    // Code to run when data state is updated

    console.log('Component updated');

    // Additional logic for updates if needed

    // Cleanup function (optional)

    return () => {

      // Cleanup tasks on component update (if needed)

      console.log('Cleanup on component update');

    };

  }, [data]); // Dependency array with 'data' means it runs whenever 'data' changes

  // Function to simulate fetching data

  const fetchData = () => {

    // Simulating asynchronous data fetching

    setTimeout(() => {

      setData(['Item 1', 'Item 2', 'Item 3']);

    }, 1000);

  };

  return (

    <div>

      <h2>My Component</h2>

      <ul>

        {data.map((item, index) => (

          <li key={index}>{item}</li>

        ))}

      </ul>

    </div>

  );

};

export default MyComponent;

• اشنایی با context api: یادمان باشد ،تمامی امکاناتی که در کامپوننت های نوع کلاسی بودند جهت دسترسی در کامپوننت های نوع تابعی از هوک ها استفاده شد و context api هم جزو همین موارد می باشد. از کانتکست جهت ارسال داده ( props , state ...) از یک کامپوننت به کامپوننت دیگه ای استفاده میشه که دیگه نیاز به دریل کردن وجود ندارد. وقتی ما از context استفاده کنیم در صورتی که زیاد از ان استفاده کنیم باعث میشه که از کاپوننت هامون اگه بخوایم مجدد استفاده کنیم کار سخت بشه.

با توجه به این که هر فایل و یا هر کامپوننت وظیفه انجام تنها یک کار را دارد ،پس برای کاتکست هم نیاز به یک فایل مجزا داریم.https://react.dev/learn/passing-data-deeply-with-context