Многократное уничтожение реквизита в компоненте React?

Question

Когда я обнаруживаю, что использую один и тот же props в react component несколько раз (например, в рамках различных методов компонента), я в конечном итоге разрушаю props несколько раз.

Это плохая практика? Должен ли я вместо этого присваивать prop, который несколько раз подвергается деструктуризации, самому экземпляру (что-то вроде this.propOfInterest = this.props.propOfInterest в constructor()?

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

    // do something with propOfInterest
  }

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

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

Answer 1

Разрушение не является плохой практикой, и это никоим образом не снизит производительность. Вне зависимости от того, будете ли вы деструктурировать или нет, Babel преобразует ваш код в тот же оператор перед объединением.

Так в основном,

const { propOfInterest } = this.props;

и

const propOfInterest = this.props.propOfInterest;

будет упакован таким же образом.

Если вы скопируете эти две строки в онлайн-конвейер Babel , вы получите эти результаты.

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

приведет к

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

Если говорить о производительности, то, когда вы используете this, она становится переменной экземпляра. И, в идеале, переменные экземпляра намного медленнее по производительности, согласно Николасу Закасу в своей книге Высокопроизводительный JavaScript .

Когда дело доходит до данных Javascript, есть почти четыре способа доступа к ним: литеральные значения, переменные, свойства объекта и элементы массива. Думая об оптимизации, буквальные значения и переменные работают примерно одинаково и значительно быстрее, чем свойства объекта и элементы массива.

Таким образом, всякий раз, когда вы ссылаетесь на свойство объекта или элемент массива несколько раз, вы можете повысить производительность, определив переменную. (Это относится как к чтению, так и к записи данных.)

Делая выводы с точки зрения автора, деструктуризация происходит намного быстрее, чем сохранение значений в переменной экземпляра.

Если бы мы могли создать пример jsperf , мы точно будем знать.