01.06.2024 в 17:22

Напишите компонент React как профессионал

В мире React написание компонентов — это искусство. Речь идет не только о том, чтобы заставить их работать, но и о том, чтобы заставить их работать хорошо. Сегодня мы рассмотрим, как создавать компоненты как профессионал, уделяя особое внимание читаемости, возможности повторного использования и эффективности.

Создайте компонент List

Начнем с базового компонента List:

src/components/List.js

import React from 'react';

const List = ({ data }) => {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default List;

Этот компонент принимает массив data и отображает его в виде списка.

Улучшение компонентов с помощью HOC

Компоненты высшего порядка (HOC) — это мощный шаблон для повторного использования компонентной логики. По сути, они оборачивают компонент, чтобы расширить его функциональность, не изменяя его структуру.

Например, withLoading HOC можно использовать для отображения состояния загрузки:

src/hocs/withLoading.js

import React, { useState } from 'react';

function withLoading(Component) {
  return function WithLoading({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props} />;
  };
}

export default withLoading;

Этот HOC проверяет свойство isLoading. Если оно истинно, он отображает сообщение «Загрузка…». В противном случае он отображает упакованный компонент, обеспечивая бесперебойный пользовательский опыт во время извлечения данных.

Аналогично, withErrorHandling — это еще один HOC, который может управлять состояниями ошибок:

src/hocs/withErrorHandling.js

import React from 'react';

function withErrorHandling(Component) {
  return function WithErrorHandling({ error, ...props }) {
    if (error) {
      return <div>Error: {error.message}</div>;
    }
    return <Component {...props} />;
  };
}

export default withErrorHandling;

При возникновении ошибки withErrorHandling отображает сообщение об ошибке. В противном случае он отображает компонент как обычно. Этот HOC особенно полезен для обработки ошибок выборки или проблем в жизненном цикле компонента.

Объединив withLoading и withErrorHandling, мы можем создать надежный компонент, который элегантно обрабатывает как загрузку, так и состояния ошибок. Такой подход способствует повторному использованию кода и разделению задач, делая наши компоненты более удобными для обслуживания и более понятными.

Получение данных с помощью хуков

Хуки React позволяют нам использовать состояние и другие функции React без написания класса. useFetch — это пользовательский хук, который извлекает данные из API:

src/hooks/useFetch.js

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // Cleanup function
    return () => {
      // Cleanup logic if needed
    };
  }, [url]);

  return { data, isLoading, error };
};

export default useFetch;

Он управляет состоянием выборки, хранением данных и ошибками, что упрощает выборку и отображение данных в наших компонентах.

Сборка приложения

Наконец, мы объединяем все в компоненте App:

src/App.js

import React from 'react';
import withLoading from './hocs/withLoading';
import withErrorHandling from './hocs/withErrorHandling'; // Yeni HOC eklendi
import useFetch from './hooks/useFetch';
import List from './components/List';

const ListWithLoading = withLoading(List);
const ListWithErrorHandling = withErrorHandling(ListWithLoading); // ListWithLoading bileşenine hata işleme eklemek için kullanıldı

const App = () => {
  const { data, isLoading, error } = useFetch('https://api.example.com/data');

  return (
    <div>
      <h1>List Component</h1>
      <ListWithErrorHandling data={data} isLoading={isLoading} error={error} /> {/* Hata durumunu ListWithLoading bileşenine iletir */}
    </div>
  );
};

export default App;

Мы используем наш хук useFetch для загрузки данных и передачи их в наш компонент List, который улучшен возможностями загрузки и обработки ошибок через наши HOC.

Заключение

Написание компонентов как профессионал означает думать о более широкой картине. Речь идет о создании компонентов, которые легко читать, поддерживать и повторно использовать. Используя шаблоны, такие как HOC и хуки, мы можем создать чистую и эффективную кодовую базу, которая выдержит испытание временем.
Источник

#JavaScript #React #ReactNative