在React组件中进行销毁

Question

There are a few articles stating that's best practice to use ES6 destructuring for React props & state.

Eg: const { showModal, hideModal } = this.props;

While I agree with this from the perspective of having much cleaner code, I had a discussion with one other developer suggesting that this should be done for class methods as well because it will bring a performance improvement.

I say it won't be any faster and also it will make the code more confusing.

Does anyone have any opinion on this?

Answer 1

First it will not make your code any slower/faster. I am sure someone might come out with some crazy synthetic case that will show 10ms improvement over the set with 10000000 records with 1000 properties each, but - in real world applications readability and maintainability is way more important. And if your code is smaller and easier to read and understand - it will contain less mistakes and as the end result will be quicker.

My personal opinion on destructuring is that I does lead us to writing less code that is easier to read, both for variables and parameters. Lets take this code from react-virtualized for example:

_cellRenderer ({ columnIndex, key, rowIndex, style }) {
  if (columnIndex === 0) {
    return this._renderLeftSideCell({ columnIndex, key, rowIndex, style })
  } else {
    return this._renderBodyCell({ columnIndex, key, rowIndex, style })
  }
}

Here just by looking at the method declaration it is immediately obvious what parameters are.

And now - compare it with this:

_cellRenderer (p) {
  if (p.columnIndex === 0) {
    return this._renderLeftSideCell({ columnIndex: p.columnIndex, key: p.key, rowIndex: p.rowIndex, style: p.style })
  } else {
    return this._renderBodyCell({ columnIndex: p.columnIndex, key: p.key, rowIndex: p.rowIndex, style: p.style })
  }
}

Way more code and not so clean and easy to read, isn't it?

Answer 2

Yes, I agree with react-virtualised example as well.

But what about having here something like this?

const { _renderBodyCell, _renderLeftSideCell } = this;

_cellRenderer ({ columnIndex, key, rowIndex, style }) {
  if (columnIndex === 0) {
    return _renderLeftSideCell({ columnIndex, key, rowIndex, style })
  } else {
    return _renderBodyCell({ columnIndex, key, rowIndex, style })
  }
}