Question

我在React代码中经常看到这种代码模式：

render() {
  const units = this.props.units;
  const temperature = this.state.temperature;

  return (<p>{temperature} {units}</p>);
}

和我曾经问过的一些开发人员说，这是在将状态/属性用于渲染或其他功能之前将状态/属性拉入局部常量的标准做法-但是，我找不到在React文档中任何地方都讨论过的这种做法，这些文档中的示例代码有时仅直接访问状态/属性。

我更喜欢使用直接访问，因为当您可以立即查看属性的来源时，它使代码更具可读性，而不必寻找局部常量定义。

在做出此决定之前，我想知道是否有人知道为什么存在这种做法，以及是否有充分的理由使用它？

上面的例子和这个例子有功能上的区别吗？

render() {
  return (<p>{this.state.temperature} {this.props.units}</p>);
}

Answer 1

当在函数内部使用许多道具/状态时，拉动状态/道具是一种标准做法

CRLF

您现在可以使用const名称而不是

引用它们

eg: const { prop1, prop2, prop3, prop4, ... } = this.props
    const { state1, state2, state3, ... } = this.state

在您提供的示例中，道具/状态只有1 / f的情况下，您不应这样做

this.props.propName/stateName everywhere.

底线：简洁的代码。优先事项。

Answer 2

之所以需要从prop中获取常量，是为了使props对象分解。解构意味着您获得道具对象的属性。这样一来，您可以减少所需的代码，而无需在分解结构时使用this.props.yourProps。它只会是yourProps。

对于es6标准，您的销毁也应在es6上：使用

 const {units} = this.props; //This gets the key units from the props object (es6 Syntax)

代替

const units = this.props.units; // This does the same but without using the es6 syntax

如果您以这种方式来构造代码，则可以编写更少的代码并可以更好地维护代码...当我们遵循这样的标准时，即使组织从一个开发人员转到另一个开发人员，我们也不必担心。