Как лучше всего использовать const в рендере или состоянии напрямую?

Я новичок, чтобы реагировать, пожалуйста, помогите мне понять передовой опыт.

Должен ли я использовать const в рендере или состоянии напрямую?

Ниже приведен пример кода.

import React, { Component } from 'react';

    class VehicleDetail extends Component{
        constructor(props){
           super(props);
           this.state = {vehicle: [] };
        }

    componentDidMount() {

            axios.get(`/getDetails/${this.props.match.params.id}`)
                .then(response => {
                    this.setState({ vehicle : response.data.vehicle });
                });
        }

    render() {

        const vehicle = this.state.vehicle;

        return(
            <div className="col-12 col-md-5 car-price-detail">
                <h3>{vehicle.title}</h3>
                <h5><span>Mileage:</span> {vehicle.mileage}</h5>
                <h5><span>Color:</span> {vehicle.exterior_color}</h5>
            </div>
        );
    }
}

import React, { Component } from 'react';

    class VehicleDetail extends Component{
        constructor(props){
           super(props);
           this.state = {vehicle: [] };
        }

    componentDidMount() {

            axios.get(`/getDetails/${this.props.match.params.id}`)
                .then(response => {
                    this.setState({ vehicle : response.data.vehicle });
                });
        }

    render() {

        return(
            <div className="col-12 col-md-5 car-price-detail">
                <h3>{this.state.vehicle.title}</h3>
                <h5><span>Mileage:</span> {this.state.vehicle.mileage}</h5>
                <h5><span>Color:</span> {this.state.vehicle.exterior_color}</h5>
            </div>
        );
    }
}
1
0
671
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

ESLINT предлагает вам использовать деструктуризация для ваших переменных:

const { vehicle } = this.state;

Я считаю, что это не имеет значения. Используйте метод, который вам подходит. Я лично использую в этой ситуации деструктурирующие переменные.

Вы можете использовать деструктуризацию, как предлагает ESLINT. С деструктуризацией каждая ваша линия будет выглядеть меньше.

Кроме того, рассмотрев ситуацию,

return (
    <div className="col-12 col-md-5 car-price-detail">
        <h3>{this.state.vehicle.title}</h3>
        <h5><span>Mileage:</span> {this.state.vehicle.mileage}</h5>
        <h5><span>Color:</span> {this.state.vehicle.exterior_color}</h5>
    </div>
);

Здесь вы напрямую используете переменную состояния. Также могло быть намного больше строк. Если когда-нибудь в будущем вам придется изменить переменную состояния vehicle, вам нужно будет изменить каждую строку, где бы вы ее ни использовали. Это плохая практика в коде. Кроме того, это также повлияет на обслуживание вашего кода. Вот почему мы используем деструктуризацию

const { vehicle } = this.state;

return (
    <div className="col-12 col-md-5 car-price-detail">
        <h3>{vehicle.title}</h3>
        <h5><span>Mileage:</span> {vehicle.mileage}</h5>
        <h5><span>Color:</span> {vehicle.exterior_color}</h5>
    </div>
);

С этим кодом у вас будет только одна строка изменения, если произойдет такая ситуация. Это хорошая практика. Я знаю несколько причин. Если кто-то еще знает что-нибудь еще, пожалуйста, внесите свой вклад. Очень признателен.

Лучшей практики нет, это вопрос стиля. Обратите внимание, что, поскольку свойства свойств и свойств могут иметь одинаковые имена, чрезмерная деструктуризация может привести к конфликтам имен и привести к несогласованности:

render() {
    const { vehicle } = this.state;
    const { vehicle: vehicleProp }  = this.props;
    ...

Сохранение объектов для справки менее двусмысленно, это приводит к более подробному, но более легкому для понимания коду, потому что использование объектов state и props кое-что говорит о том, как работает компонент:

const { state, props } = this;
...
{state.vehicle || props.vehicle}
...

В то время как this.state и this.props чрезмерны в выражениях JSX (также несовместимы с функциональными компонентами).

Другие вопросы по теме