Question

有一些文章指出使用ES6解构来实现React道具＆amp;的最佳做法。状态。

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

虽然我从拥有更清晰代码的角度来看同意这一点，但我与另一位开发人员进行了讨论，建议这也应该针对类方法进行，因为它会带来性能提升。

我说它不会更快，而且会让代码更加混乱。

有没有人对此有任何意见？

Answer 1

首先，它不会使您的代码更慢/更快。我相信有人可能会出现一些疯狂的合成案例，它会显示10万毫秒的改进，其中10000000条记录各有1000个属性，但是 - 在现实世界的应用程序中，可读性和可维护性更为重要。如果您的代码更小，更易于阅读和理解 - 它将包含更少的错误，并且最终结果将更快。

我对解构的个人意见是，我确实引导我们编写更少的代码，这些代码更容易阅读，包括变量和参数。让我们从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

是的，我同意react-virtualised示例。

但是在这里有这样的事情呢？

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

React组件中的解构

2 个答案: