在 React 组件中多次解构道具？答案

【问题标题】：Destructing Props Multiple Times in React Component?在 React 组件中多次解构道具？
【发布时间】：2019-04-11 11:30:20
【问题描述】：

当我发现自己在 react component 中多次使用相同的 props（例如，在组件的不同方法中）时，我最终会多次解构 props。

这是不好的做法吗？我是否应该将多次解构的prop 分配给实例本身（类似于constructor() 中的this.propOfInterest = this.props.propOfInterest？

class MyComponent extends React.Component {
  myMethod() {
    const {
      propOfInterest,
    } = this.props

    // do something with propOfInterest
  }

  render() {
    const {
      propOfInterest,
    } = this.props

    return (
      <div className={propOfInterest}>
      </div>
    )
  }
}

【问题讨论】：

软件工程将帮助您获得有关“最佳实践”问题的答案。因此，我投票决定将此问题作为离题结束，因为它属于“softwareengineering.stackexchange.com”

标签： javascript reactjs frontend web-frontend react-props

【解决方案1】：

解构不是一个坏习惯，它不会以任何方式降低性能。在后台，无论你是否解构，Babel 都会在打包之前将你的代码转换成相同的语句。

基本上，

const { propOfInterest } = this.props;

和

const propOfInterest = this.props.propOfInterest;

将以相同的方式捆绑。

如果你将这两行复制到online Babel transpiler，你会得到这些结果。

const { propOfInterest } = props;
const propInterest = props.propInterest;

会导致

var _props = props,
    propOfInterest = _props.propOfInterest;
var propInterest = props.propInterest;

谈到性能，你使用this的那一刻，它就变成了一个实例变量。根据 Nicholas Zakas 在他的书 High Performance JavaScript 中的说法，理想情况下实例变量的性能会变慢。

当涉及到 Javascript 数据时，几乎有四种方法可以访问它：文字值、变量、对象属性和数组项。在考虑优化时，字面量值和变量的性能大致相同，并且比对象属性和数组项要快得多。

因此，每当您多次引用一个对象属性或数组项时，您都可以通过定义一个变量来提高性能。（这适用于读取和写入数据。）

从作者的角度得出结论，解构比将值存储在实例变量中要快得多。

如果我们可以创建一个jsperf 示例，我们肯定会知道。

【讨论】：