在React組件中進行銷毀

Question

有幾篇文章指出將ES6分解用於React道具和狀態的最佳實踐。

例如： const { showModal, hideModal } = this.props;

盡管我從擁有更清晰的代碼的角度同意了這一點，但我與另一位開發人員進行了討論，建議對於類方法也應這樣做，因為這會帶來性能上的改進。

我說這不會更快，而且還會使代碼更加混亂。

有人對此有意見嗎？

Answer 1

首先，它不會使您的代碼變慢/變快。 我確信有人會提出一些瘋狂的綜合案例，該案例將比具有10000000條記錄（每條記錄具有1000個屬性）的記錄集表現出10ms的改進，但是-在現實世界中，應用程序的可讀性和可維護性更為重要。 而且，如果您的代碼更小並且更易於閱讀和理解，那么它將包含更少的錯誤，並且最終結果會更快。

我對銷毀的個人看法是，我確實帶領我們編寫了更少的變量和參數均易於閱讀的代碼。 讓我們從react-virtualized中獲取以下代碼：

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

在這里，僅通過查看方法聲明，就可以明顯看出參數是什么。

現在-將其與此：

_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 })
  }
}

是不是更多的代碼又不是那么干凈易讀，不是嗎？

Answer 2

是的，我也同意虛擬化示例。

但是在這里有這樣的東西呢？

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 })
  }
}