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

ESLINT建议您使用destructuring您的变量：

const { vehicle } = this.state;

Answer 2

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

使用此代码，如果发生这种情况，您将只有一行更改。这是一个好习惯。这些是我知道的一些原因。如果还有其他知识，请加入。非常感谢。

Answer 3

我相信没关系。使用适合自己的方法。在这种情况下，我个人使用解构变量。

什么是最佳做法，直接在渲染或状态中使用const？

3 个答案: