Чӣ тавр ба маълумот дар 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>
  );
}

API Context: Ҳалли барои идоракунии марказӣ маълумотҳое, ки барои бисёр компонентҳои дарунсохт дастрас аст, бе ниёз ба интиқоли маълумот тавассути 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): Барои идоракунии ҳолатҳои мураккаб дар барнома истифода мешаванд. Онҳо анбори марказӣ ва механизмҳои идоракунии тағиротро пешниҳод мекунанд.

Чӣ тавр ба маълумот дар React дастрасӣ пайдо кардан мумкин аст?