Как сделать компонент React более понятным и понятным из моего примера?

Question

Я начал работать с React месяц назад.Сейчас я создаю пошаговое приложение.У меня есть свой код, но у меня есть ощущение, что я могу очистить его еще больше.

Может ли кто-нибудь проверить этот код ... и дать мне совет, из которого я могу изучить и улучшить свои навыки React?

Мой код работает, но мне интересно, может ли он быть чище:

import React, { Component } from 'react';

import axios from 'axios';

class App extends Component {

    state = {
        fragrances: []
    }

    componentDidMount() {
    const URI = 'http://localhost:1337/';
    const post_type = 'fragrances';

        axios
        .get(`${URI + post_type}`)

        .then(response => {
            const fragrances = response.data;
            this.setState({ fragrances });
        })

        .catch(error => {
            console.log('An error occurred:', error);
        });
    }

    render() {
    const { fragrances } = this.state;
        return (
        <React.Fragment>
            <div className="row">
            {
                fragrances.map((fragrance, index) => {
                const url = 'http://localhost:1337';
                const image = fragrance.Image;
                const name = fragrance.Name;
                const category = fragrance.Category;
                const desc = fragrance.Description;
                    return (
                        <div key={index} className="col-sm-6 col-xs-12">
                            <div className="fragrance">
                                { image ? <img className="fragrance__image" src={url + image.url} alt={name} /> : <h4>Geen foto beschikbaar.</h4>}
                                { name ? <h2 className="fragrance__title">{name}</h2> : 'Geen titel aanwezig.'}
                                { category ? <span class="fragrance__category">{category}</span> : '    '}
                                { desc ? <p className="fragrance__description">{desc}</p> : 'Geen omschrijving aanwezig.'}
                            </div>
                        </div>
                    )
                })
            }
            </div>
        </React.Fragment>
        )
    }
}
export default App;

---

Заранее спасибо.

Answer 1

Создание компонента <Fragrance /> сделало бы его более чистым плюс использование деконструкции ES6.Кроме того, Fragment не требуется по всему списку, так как он заключен в один <div className="row">:

....

render() {
  const { fragrances } = this.state;
  const url = 'http://localhost:1337';

  return (
      <div className="row">
        {fragrances.map((fragrance, index) => {
           const { Image: image, Name: name, Category: category, Description: desc } = fragrance;
            return (
              <Fragrance
                key={index}
                image={image}
                name={name}
                category={category}
                desc={desc}
              />
            )
          })
        }
      </div>
    )
  }

...

Fragrance.js

const Fragance = ({name, category, image, desc }) => (
  <div key={index} className="col-sm-6 col-xs-12">
    <div className="fragrance">
      { image ? <img className="fragrance__image" src={url + image.url} alt={name} /> : <h4>Geen foto beschikbaar.</h4>}
      { name ? <h2 className="fragrance__title">{name}</h2> : 'Geen titel aanwezig.'}
      { category ? <span class="fragrance__category">{category}</span> : '    '}
      { desc ? <p className="fragrance__description">{desc}</p> : 'Geen omschrijving aanwezig.'}
     </div>
   </div>
)

export default Fragrance;

Answer 2

1. Переместить логику API в отдельный модуль.
2. Переместить описание аромата в отдельный компонент.
3. Рассмотрите возможность использования HOC для получения данных и функционального компонента для его визуализации.
4. Используйте красивее для форматирования вашего кода.https://prettier.io
5. Если это реальное приложение, подумайте об использовании библиотеки управления состояниями, такой как Redux.

Answer 3

Наблюдение вашего кода:

• Код внутри componentDidMount () можно переместить в какое-то центральное место, например, в отдельный компонент, который их экспортирует, все axios код находится там.
• Всегда старайтесь разбить компонент на меньшие и управляемые куски , что улучшает удобочитаемость и делает его более управляемым.
• Отформатируйте код таким образом, чтобы весь ваш код находился в видимой области, поэтому нам не следует прокручивать его по горизонтали, чтобы увидеть работающий код.

• Ваш код внутри <div className="fragrance">можно улучшить читабельность, как показано ниже, старайтесь всегда делать его чистым, чтобы лучше читать.

  const { fragrances } = this.state;
  const image = <img className="fragrance__image" src={url + image.url} alt={name} />;
  const name = <h2 className="fragrance__title">{name}</h2>;
  const category = <span class="fragrance__category">{category}</span>;
  const desc = <p className="fragrance__description">{desc}</p>;
  
  return (
  <React.Fragment>
      <div className="row">
      {
          fragrances.map((fragrance, index) => {
          const url = 'http://localhost:1337';
          const image = fragrance.Image;
          const name = fragrance.Name;
          const category = fragrance.Category;
          const desc = fragrance.Description;
              return (
                  <div key={index} className="col-sm-6 col-xs-12">
                      <div className="fragrance">
                          { image ? {image} : <h4>Geen foto beschikbaar.</h4>}
                          { name ? {name} : 'Geen titel aanwezig.'}
                          { category ? {category}  : '    '}
                          { desc ? {desc}  : 'Geen omschrijving aanwezig.'}
                      </div>
                  </div>
              )
          })
      }
      </div>
  </React.Fragment>
  )
  

• Пожалуйста, не используйте index в карте есть ключ , это приведет к непредсказуемым приложениям, прочитайте эту статью индекс-как-ключ-анти-паттерн

• Рассмотреть возможность использования HOC (компоненты высшего порядка) React HOC

• Используйте CSS-модули, чтобы избежать CSS-конфликтов CSS-модули

Answer 4

// conatnsts.js
export const URI = 'http://localhost:1337/';
export const URL = 'http://localhost:1337';
export const POST_TYPE = 'fragrances';


// App.js
import React, { Component } from 'react';
import axios from 'axios';
import { URI, URL, POST_TYPE } from './constants.js';

class App extends Component {

    state = {
        fragrances: [],
    };

    componentDidMount() {
        axios
          .get(`${URI + post_type}`)
          .then(response => {
            const fragrances = response.data;
            this.setState({ fragrances });
        })
        .catch(error => {
            console.log('An error occurred:', error);
        });
    }

    render() {
      const { fragrances } = this.state;
      return (
        <>
          <div className="row">
            {
                fragrances.map(({ Image: image, Name: name, Category: category, Description: desc}, index) => (
                  <div key={index} className="col-sm-6 col-xs-12">
                    <div className="fragrance">
                      {image ? <img className="fragrance__image" src={URL + image.url} alt={name} /> : <h4>Geen foto beschikbaar.</h4>}
                      {name ? <h2 className="fragrance__title">{name}</h2> : 'Geen titel aanwezig.'}
                      {category ? <span class="fragrance__category">{category}</span> : '    '}
                      {desc ? <p className="fragrance__description">{desc}</p> : 'Geen omschrijving aanwezig.'}
                    </div>
                  </div>)
                )
              }
           </div>
        </>
        )
    }
}
export default App;

Я добавил небольшие изменения, но чтобы ваш код был чистым и более читаемым в компоненте записи React только для той цели, для которой он должен служить.Ваш компонент не должен думать о том, как визуализировать изображение, категорию или описание.Вместо этого вы должны иметь что-то вроде FragranceListItem.Этот компонент (компонент приложения) является FragranceList.Таким образом, ваш FragranceList компонент отображает FragranceListItem s.В FragranceListItem вы можете иметь компоненты FragranceImage, FragranceName, FragranceCategory, FragranceDescription, которые будут получать необходимую информацию от props, и они решат, как показать свои данные, если условие истинно или нет,Подумайте о компонентах, таких как функции.Функция должна быть простой, она должна делать только одно, один и тот же компонент React.

А как быть с извлечением данных и переводом их в состояние.Если это небольшие приложения, то это работает.Но если он станет больше, появится необходимость в таких библиотеках, как redux, react-redux, redux-thunks, redux-sagas.У этих библиотек есть свои подходы к тому, как поддерживать состояние вашего приложения, как выполнять вызовы на стороне сервера из отдельных модулей и удерживать побочные эффекты вдали от ваших компонентов.

Answer 5

Я бы порекомендовал вам предварительно отформатировать код переформатирования.Насколько я знаю, большинство Intellij IDE имеют это, которое можно предварительно выполнить, нажав: CTRL + ALT + L.

Это вместе с (строгим) линтером (ESLint) может привести к четкой общей структуре и, таким образом,повышенная читаемость.