直接使用this.props或this.state与设置const

Question

我是新来的反应者，在查看示例时，我发现许多教程并不直接使用this.props或this.state。相反，他们将在函数的开头设置一个const。我已经互换使用了两者，而没有看到功能上的任何差异。

使用const有收获吗？

即

const {
    error
} = this.state;

{error && <p>{error.message}</p>}

vs

{this.state.error && <p>{this.state.error.message}</p>}

Answer 1

这称为Destructuring，是ES6的功能。

在功能上没有区别，但是使用解构几乎没有好处。

首先是更清晰的代码。如果在代码块的顶部对对象进行解构，则对读者来说，将要使用的变量将更加清晰。

其次，它将对象属性放在局部变量中，这可以提高性能，尤其是在循环中多次使用变量的情况下。

Answer 2

正如您自己所言，根本没有区别，这是事实。使用const的简单答案是

在您以这种方式定义之后

const {error} = this.state;

现在您可以在以下代码中仅使用术语（错误），而不必使用冗长的（this.state.error）所以只是为了简单