رسیدن به قلاب مبتدی به پیشرفته

فهرست محتوای

📌 مقدمه

📌 نیاز به قلاب های React

📌 واکنش قلاب

➡ استفاده

➡ استفاده

➡ useContext

📌 ممنون

مقدمه

سلام توسعه دهنده شگفت انگیز 🧑‍💻 ، قبل در حال حفر این موضوع به من اجازه می دهد یک مقدمه کوچک و برخی از دستورالعمل ها را به شما ارائه دهم. نگران نباشید سریع و واضح خواهد بودبشر

من چنین داس هستم ، الف توسعه دهنده کامل پشته در حال حاضر بیش از دو راه اندازی کار می کند. من وارد شده ام توسعه وب برای دو سال گذشتهبشر

من را به 👉 LinkedIn وصل کنید

بیایید شروع کنیم!

نیاز به قلاب واکنش

➡ usstate

این یکی از بیشترین قلاب های توسعه دهندگان در هنگام کار با React است. بیایید هدف قلاب را در React درک کنیم –

React از یک DOM مجازی استفاده می کند و تمام متغیرهایی را که برخلاف JavaScript اعلام شده است ، دنبال نمی کند. بنابراین ، اگر وجود داشته باشد متغیری که توسط توسعه دهنده اعلام شده است که می تواند بر اساس برخی از ورودی ها یا اقدامات آن تغییر کند و این عنصر را مجدداً ارائه دهد و باعث شود تا موارد در سمت کاربر بازگردندبشر مهم است که به React بگویید که از آن متغیر پیگیری کند و این کار با استفاده از قلاب Usestate انجام می شود.

👉 ساختار جدید

//Functional component
const [state, setState] = useState(initialValue);

setState(newValue);

//Class component
this.state = {
value: initialValue
}

this.state.setState({
value: newValue
});

👉 نمونه جدید

//Functional component
function check() {
  const [count, setCount] = useState(0);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count => count + 1)}>+</button>
    </>
  );
}

//Class component
class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={() => this.setState(
              { count: this.state.count + 1 }
        )}>
          +
        </button>
      </div>
    );
  }
}

➡ کار

این یکی دیگر از مهمترین قلاب های React است که بیشتر توسعه دهندگان React حتی در پروژه های کوچک از آن استفاده می کنند. هدف اصلی این قلاب هنگامی بازی می شود که می خواهید از هرگونه ارتباط شخص ثالث با هر API یا سرور استفاده کنید.

بیایید اوج را به یک مثال برسانیم و آن را به روشی بهتر درک کنیم –

👉 ساختار جدید

//Functional component
useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes

  return () => {
            cleanup
        }
}, [dependency]);

👉 نمونه جدید

function App() {
  const [list, setList] = useState([]);
  const [conn, setConn] = useState(false);
  const [call, setCall] = useState(false);

  useEffect(() => {
   fetch('http://localhost:3333/list')
    .then(data => data.json())
     .then(items => {
       if(call) {
         setList(items)
       }
     })
 }, [conn])

  return(
    <>
       Get Data 
       <button onClick={() => { 
                 setCall(true); 
                 conn ? setConn(false) : setConn(true);
}}>Click Me</button>
    </>
  )
}

دو متغیر حالت وجود دارد که برای برقراری تماس با این سرور محلی استفاده می شود. اولین مورد این است که Toogle را کلیک کنید که بر روی دکمه کلیک کنید تا تماس برقرار شود. در متغیر حالت دوم به دلیل این واقعیت است که وابستگی به استفاده از استفاده در ابتدا هنگام انجام اولین مقدار انجام می شودبشر

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

🔴 یادداشت : دلیل اینکه ما در مورد این قلاب در اجزای کلاس بحث نکرده ایم این است که به 3 کارکرد مختلف تقسیم می شود جزءبا اجزاءبا اجزای WillUnmountبشر

من می دانم که بسیاری از شما فکر می کنید این در این وبلاگ پوشش خواهد داد؟ پاسخ این است که بله ، من توضیحات کوچکی از آنها را به شما ارائه می دهم تا این وبلاگ هیچ سنگی را به صورت ناپدید نشود و دانش کاملی کسب کنید.

• جزء : عملکرد داخل این کار پس از ارائه یا نصب مؤلفه به عبارت دیگر اجرا می شود ، بنابراین اگر می خواهید هنگام ارائه مؤلفه ، هرگونه تماس را انجام دهید ، می توانید از این قلاب استفاده کنید.

• اجزاء : عملکرد داخل این کار در صورت بروزرسانی در مورد مؤلفه مانند تغییر در حالت ها یا غرفه ها اجرا می شود.

• اجزای WillUnmount : عملکرد داخل این کار در صورت عدم انعطاف مؤلفه اجرا می شود. بلافاصله پس از نابودی یا نابودی این مؤلفه و بیشتر مورد استفاده برای اهداف پاکسازی توسط توسعه دهندگان قرار می گیرد.

➡ useContext

در حین استفاده از React می دانیم که می توانیم داده های خود را بین چندین مؤلفه از طریق غرفه ها درست ارسال کنیم؟ اما در مورد داده هایی مانند موضوع کاربر فکر کنید! این داده ها چیزی است که باید بیشتر به تمام مؤلفه های پروژه ارسال شود. آیا اکنون کثیف نیست زیرا ما باید آن را از طریق غرفه ها به هر یک از آنها ارسال کنیم.

راه حلی که توسعه دهندگان قبلاً از این نوع ایالت ها استفاده می کردند ، Redux بود اما در تاریخ امروز ما UseContext را با ما داریم که API متن واکنش برای حل این مسئله است و برای اکثر توسعه دهندگان که نمی خواهند پروژه یا محصول خود را با استفاده از Redux خراب کنند ، بسیار مفید است.

بنابراین ، اکنون همانطور که از هدف آن پاک هستیم ، بیایید در مورد ساختار و مثال آن بحث کنیم تا بتوانید از آن در پروژه بعدی خود استفاده کنید –

متشکرم

شما آن را تا پایان این وبلاگ ساخته اید. چنین وبلاگ هایی بیشتر در خط هستند.

اگر یک اظهار نظر کوچک در وبلاگ وجود داشته باشد ، دلگرم کننده خواهد بود. من هر یک از آنها را می گذرانم ، بنابراین نظر دهید.

اگر می خواهید یک اعلان دریافت کنید 🔔 هنگام انتشار آن ، فراموش نکنید که روی دکمه زیر ضربه بزنید.

و در آخر می خواهم بگویم

کدگذاری را ادامه دهید #⃣ ، ادامه دهید