Javascript 在渲染或状态中直接使用常量的最佳实践是什么？

我是新手，请帮助我了解最佳实践

我应该直接在render或state中使用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}来自'React'；
类VehicleDetail扩展组件{
建造师（道具）{
超级（道具）；
this.state={vehicle:[]}；
}
componentDidMount（）{
get（`/getDetails/${this.props.match.params.id}`）
。然后（响应=>{
this.setState（{vehicle:response.data.vehicle}）；
});
}
render（）{
const vehicle=this.state.vehicle；
返回(
{vehicle.title}
里程：{车辆里程}
颜色：{车辆.外部颜色}
);
}
}

---

import React，{Component}来自'React'；
类车辆扩展组件{
建造师（道具）{
超级（道具）；
this.state={vehicle:[]}；
}
componentDidMount（）{
get（`/getDetails/${this.props.match.params.id}`）
。然后（响应=>{
this.setState（{vehicle:response.data.vehicle}）；
});
}
render（）{
返回(
{this.state.vehicle.title}
里程：{此.状态.车辆.里程}
颜色：{this.state.vehicle.external_Color}
);
}
}

ESLINT建议您使用变量：

const { vehicle } = this.state;

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

---

使用此代码，如果出现这种情况，您将只有一行更改。这是一个很好的做法。这是我知道的一些原因。如果还有人知道更多，请插嘴。非常感谢。

您可以按照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>
);

---

使用此代码，如果出现这种情况，您将只有一行更改。这是一个很好的做法。这是我知道的一些原因。如果还有人知道更多，请插嘴。非常感谢。

没有最佳实践，这是风格问题。请注意，由于道具和状态属性可能具有相同的名称，过度的分解可能会导致命名冲突并导致不一致：

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

保留对象以供参考不那么模棱两可，这会导致更详细但更容易理解的代码，因为

状态

和

道具

对象的使用告诉我们组件是如何工作的：

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

---

虽然

this.state

和

this.props

在JSX表达式中过多（也与功能组件不一致）。

没有最佳实践，这是风格问题。请注意，由于道具和状态属性可能具有相同的名称，过度的分解可能会导致命名冲突并导致不一致：

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

保留对象以供参考不那么模棱两可，这会导致更详细但更容易理解的代码，因为

状态

和

道具

对象的使用告诉我们组件是如何工作的：

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

而

this.state

和

this.props

在JSX表达式中过多（也与功能组件不一致）