Какова лучшая практика, используя const в render или state напрямую?

Question

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

Должен ли я использовать 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>
        );
    }
}

Answer 1

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

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 (также несовместимы с функциональными компонентами).

Answer 2

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

Answer 3

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

Кроме того, cosider ситуация,

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

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

Answer 4

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

const { vehicle } = this.state;