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

我建议您执行“重新格式化代码”。据我所知，大多数Intellij IDE都有此功能，可以通过按CTRL + ALT + L来执行。

这与（严格的）短绒（ESLint）一起可以使整体结构清晰，从而提高可读性。

Answer 2

您的代码观察：

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>
)

请不要在地图上使用 Key 来使用 index ，这将导致不可预测的应用程序，请阅读本文index-as-a-key-is-an-anti-pattern
考虑使用HOC（高阶组件）React HOC
使用CSS模块来避免CSS冲突CSS Modules

Answer 3

// 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 write组件中更具可读性，仅出于其应有的用途。您的组件不应考虑如何呈现图像或类别或描述。相反，您应该使用FragranceListItem之类的组件。此组件（应用程序组件）是FragranceList。因此，您的FragranceList组件将渲染FragranceListItem个。在FragranceListItem中，您可以拥有FragranceImage，FragranceName，FragranceCategory，FragranceDescription组件，这些组件将由props获取所需的信息，并且它们决定条件是否为真时如何显示其数据。考虑一下像功能这样的组件。功能应该很简单，它只能做一件事，即相同的React组件。

关于获取数据并将其置于状态的情况如何。如果这是一个小型应用程序，则可以正常工作。但是，如果它变得更大，则会出现诸如redux，react-redux，redux-thunks，redux-sagas之类的库的需求。这些库提供了如何保持应用程序状态，如何从单独的模块进行服务器端调用并使副作用远离组件的方法。

Answer 4

将API逻辑移至单独的模块。
将香水说明移至单独的成分。
考虑使用HOC获取数据和功能组件以进行渲染。
使用更漂亮的格式来设置代码格式。 https://prettier.io
如果它是真实的应用程序，请考虑使用状态管理库（例如Redux）。

Answer 5

创建一个<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;

如何从我的示例中使React组件更具可读性和简洁性？

5 个答案: