စိတ်ကြိုက်ချိတ်များ တုံ့ပြန်ပါ။

ချိတ်များသည် ပြန်သုံးနိုင်သော လုပ်ဆောင်ချက်များဖြစ်သည်။

သင့်တွင် အစိတ်အပိုင်းအများအပြားအသုံးပြုရန်လိုအပ်သည့် အစိတ်အပိုင်းလော့ဂျစ်တစ်ခုရှိသောအခါ၊ ကျွန်ုပ်တို့သည် ထိုယုတ္တိဗေဒကို စိတ်ကြိုက် Hook တစ်ခုသို့ ထုတ်ယူနိုင်သည်။

စိတ်ကြိုက်ချိတ်များကို "အသုံးပြုမှု" ဖြင့် စတင်သည်။ ဥပမာ- useFetch။

Hook တစ်ခုတည်ဆောက်ပါ။

အောက်ပါကုဒ်တွင်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Homeအစိတ်အပိုင်းရှိ ဒေတာများကို ရယူပြီး ၎င်းကို ပြသနေပါသည်။

ဒေတာအတုများကို ရယူရန် JSONPlaceholder ဝန်ဆောင်မှုကို အသုံးပြုပါမည် ။ လက်ရှိဒေတာမရှိသောအခါတွင် ဤဝန်ဆောင်မှုသည် အပလီကေးရှင်းများကို စမ်းသပ်ရန်အတွက် ကောင်းမွန်ပါသည်။

ပိုမိုလေ့လာရန်၊ JavaScript Fetch API ကဏ္ဍကို ကြည့်ရှုပါ။

"todo" အတုပစ္စည်းများကိုရယူရန်နှင့် စာမျက်နှာပေါ်ရှိ ခေါင်းစဉ်များကိုပြသရန် JSONPlaceholder ဝန်ဆောင်မှုကို အသုံးပြုပါ-

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

အခြားအစိတ်အပိုင်းများတွင်လည်း ကောက်ယူမှုယုတ္တိကို လိုအပ်နိုင်သည်၊ ထို့ကြောင့် ၎င်းကို စိတ်ကြိုက် Hook တစ်ခုထဲသို့ ထုတ်ယူပါမည်။

စိတ်ကြိုက် Hook အဖြစ်အသုံးပြုရန် ထုတ်ယူမှုဆိုင်ရာ ယုတ္တိဗေဒကို ဖိုင်အသစ်တစ်ခုသို့ ရွှေ့ပါ-

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

import ReactDOM from "react-dom";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

နမူနာရှင်းပြထားပါတယ်။

ကျွန်ုပ်တို့၏ဒေတာရယူရန် လိုအပ်သော ယုတ္တိဗေဒဆိုင်ရာ useFetch.jsလုပ်ဆောင်ချက်တစ်ခုပါရှိသော ဟုခေါ်သော ဖိုင်အသစ်တစ်ခုကို ဖန်တီး ထားပါသည်။useFetch

ကျွန်ုပ်တို့သည် hard-coded URL ကိုဖယ်ရှားပြီး urlစိတ်ကြိုက် Hook သို့ပေးပို့နိုင်သော variable တစ်ခုဖြင့် အစားထိုးခဲ့ပါသည်။

နောက်ဆုံးအနေဖြင့်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Hook မှ ကျွန်ုပ်တို့၏ဒေတာကို ပြန်ပေးပါသည်။

ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Hook index.jsကို တင်သွင်းပြီး useFetchအခြား Hook များကဲ့သို့ အသုံးပြုပါသည်။ ဤနေရာသည် ကျွန်ုပ်တို့ထံမှဒေတာရယူရန် URL တွင်ဖြတ်သန်းပါသည်။

ယခု ကျွန်ုပ်တို့သည် မည်သည့် URL မှဒေတာကိုရယူရန် ဤစိတ်ကြိုက် Hook ကို မည်သည့်အစိတ်အပိုင်းတွင်မဆို ပြန်လည်အသုံးပြုနိုင်ပါသည်။