Как да получите достъп до данните в 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: Решение за централизирано управление на данни, достъпни за много вложени компоненти без явен пренос на пропсов през всеки етап. Подходящо за глобални или често използвани данни (например тема, автентикация).

  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>;
  }
  

• Персонализирани 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): За управление на сложни състояния на приложението се използват външни библиотеки. Те предлагат централизирано хранилище за данни и механизми за управление на техните промени.