Question

我的代码为：

export default class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: []
        };
    }

    useValue() {
        myValue = this.state.value;
        doSomething(myValue);
    }
}

我注意到value中有两种使用this.state的方法

myValue = this.state.value;

和

const {value} = this.state;

那么这两者之间有什么区别？互相对抗有什么好处吗？非常感谢！

Answer 1

第一个示例是简单的分配，第二个示例是使用对象解构分配（Docs）。

使用解构赋值和公共变量赋值的主要区别在于，当使用解构时，可以在一行中声明更多变量。假设您有以下对象：

const obj = {
  foo1: 'someValue',
  foo2: 'anotherValue',
  foo3: 'lastValue',
};

您需要在不同的变量中具有这3个属性，您可以执行以下操作：

const foo1 = obj.foo1;
const foo2 = obj.foo2;
const foo3 = obj.foo3;

通过销毁任务，您可以执行以下操作：

const { foo1, foo2, foo3 } = obj;

如您所见，它更易于阅读，并且您编写的代码更少，以声明变量。进行销毁还可以做很多其他事情，但这是主要原因。

Answer 2

这两种语法都执行类似的功能，但是由于不同的原因而有用，并且具有不同的名称。

const {value} = this.state;被称为解构。从JavaScript对象的元素创建变量的时候。在ReactJS上下文中，当开发人员想要引用多个状态对象元素而不必直接在render方法的第一行之外引用状态时，通常使用它。请查看this link，了解有关解构的更多信息。请参阅下面的示例，从状态对象中提取多个元素。

示例const { a, b, c } = this.state;

myValue = this.state.value;是标准分配运算符。这是从值创建变量的典型方法。在这种情况下，它恰好是React状态对象的元素。您可以阅读有关赋值运算符here的更多信息。

在React

2 个答案: