时间戳

首页 > 解决方案 > 在 React 中使用 this.state 中的值的语法

reactjs - 在 React 中使用 this.state 中的值的语法

问题描述

我的代码为： 

export default class MyComponent extends React.Component {

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

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

我注意到有两种方法可以使用valueinthis.state

myValue = this.state.value;

和

const {value} = this.state;

那么这两者有什么区别呢？使用一个对抗另一个有什么好处吗？非常感谢！

标签： reactjs

解决方案

第一个例子是一个简单的赋值，第二个例子是使用对象解构赋值（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;

如您所见，它更易于阅读，并且您编写的代码更少来声明变量。解构还有很多其他事情可以做，但在这种特殊情况下，这是主要原因。

推荐阅读