Ինչպես մուտք գործել տվյալներ React-ում?

React-ում տվյալներին հասանելիության մի քանի եղանակ կա՝

• Props: Տվյալների փոխանցում ծնող կոմպոնենտից դեպի երեխա։ Props-ները փոփոխական չեն կոմպոնենտի ներսում։

  // Ծնող կոմպոնենտ
  function ParentComponent() {
    const data = "Hello from Parent!";
    return <ChildComponent myData={data} />;
  }
  
  // Երեխա կոմպոնենտ
  function ChildComponent(props) {
    return <p>{props.myData}</p>; // Տվյալների հասանելիություն props.myData-ով
  }
  

• Կարգավիճակ (State): Տվյալների կառավարում կոմպոնենտի ներսում, որոնք կարող են փոխվել ժամանակի ընթացքում։ Օգտագործվում է կոնկրետ կոմպոնենտի տվյալների համար։

  import React, { useState } from 'react';
  
  function MyComponent() {
    const [count, setCount] = useState(0); // Կարգավիճակի սահմանում
  
    function handleClick() {
      setCount(count + 1); // Կարգավիճակի փոփոխություն
    }
  
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={handleClick}>Increment</button>
      </div>
    );
  }
  

• Context API: Լուծում տվյալների կենտրոնական կառավարում՝ հասանելի շատ ներքաշված կոմպոնենտների համար առանց հստակ props փոխանցելու։ Հարմար է գլոբալ կամ հաճախ օգտագործվող տվյալների համար (օրինակ՝ թեմա, մուտք գործել):

  import React, { createContext, useContext } from 'react';
  
  // Կոնտեքստի ստեղծում
  const MyContext = createContext();
  
  // Կոնտեքստի պրովայդեր
  function MyProvider({ children }) {
    const sharedData = "Shared Data";
    return (
      <MyContext.Provider value={sharedData}>
        {children}
      </MyContext.Provider>
    );
  }
  
  // Կոնտեքստի սպառող
  function MyConsumerComponent() {
    const data = useContext(MyContext); // Տվյալների հասանելիություն useContext-ով
    return <p>{data}</p>;
  }
  

• Հարմարեցված hook-եր (Custom Hooks): Կրկնվող տրամաբանություն ստեղծել՝ տվյալներին մուտք գործելու համար արտաքին աղբյուրներից (օրինակ՝ API):

  import { useState, useEffect } from 'react';
  
  function useFetchData(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
  
    useEffect(() => {
      async function fetchData() {
        try {
          const response = await fetch(url);
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          const result = await response.json();
          setData(result);
        } catch (error) {
          setError(error);
        } finally {
          setLoading(false);
        }
      }
      fetchData();
    }, [url]); // կախվածություն url-ից
  
    return { data, loading, error };
  }
  
  // Hook-ի օգտագործում
  function DataDisplay() {
    const { data, loading, error } = useFetchData('https://api.example.com/data');
  
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;
    return <p>{JSON.stringify(data)}</p>;
  }
  

• Գրադարաններ (օրինակ Redux, Zustand): Կիրառվում են բարդ վիճակների կառավարման համար։ Նրանք առաջարկում են կենտրոնական պահեստ և փոփոխությունների կառավարման մեխանիզմներ։