當(dāng)您在React組件中使用默認參數(shù)設(shè)置默認屬性時，您不會得到proptypes驗證，而且您還需要在要使用這些屬性的每個類方法中定義這些默認參數(shù)。

最近，在我所做的代碼回顧中，我在React組件中看到了這樣的代碼：

render() {
  const {
    count = 0
  } = this.props;
  return{ count }}

我的第一個想法是，這是錯誤的，因為您應(yīng)該通過添加名為defaultProps的屬性或使用靜態(tài)方法來定義默認道具。

// Setting a defaultProps property
class App extends React.Component {
  render() {
    const {count} = this.props;
    return{count}}
}
App.defaultProps = {
  count: 0
}

// Adding an static method to the component
class App extends React.Component {
  static defaultProps = {
    count: 0
  }
  render() {
    const {count} = this.props;
    return{count}}
}

但在嘗試了代碼之后，令我驚訝的是，它成功了！所以我想知道這在React組件中是否是一個有效的實踐，因為我在任何地方都沒有見過它。即使這樣做是可行的，也有一些事情是行不通的，但它們并不是那么明顯。

PropTypes驗證

根據(jù)React文檔：propTypes類型檢查發(fā)生在defaultProps解析之后，因此類型檢查也將應(yīng)用于defaultProps。

這意味著，在定義proptypes時，將在props和默認props中進行驗證，這些props和默認props是使用static defaultProps或defaultProps方法設(shè)置的，而不是使用默認參數(shù)設(shè)置的。

例如，如果我們這樣做：

class App extends React.Component {
  render() {
    const { count } = this.props
    return{ count }}
}

App.propTypes = {
  count: PropTypes.number
}

App.defaultProps = {
  count: 'hello'
}

我們將收到以下警告：

index.js:1446 Warning: Failed prop type: Invalid prop `count` of type `string` supplied to `App`, expected `number`.

但是如果我們使用默認參數(shù)：

class App extends React.Component {
  render() {
    const { count = 'hello' } = this.props
    return{ count }}
}

App.propTypes = {
  count: PropTypes.number
}

我們不會得到任何錯誤或警告，因為React沒有任何方法進行運行時分析。

類方法之間的props值可能不一致

當(dāng)我們定義defaultProps時，它內(nèi)部定義的值將在React組件中的每個方法上可用，但如果我們使用defalt參數(shù)，則必須在每個方法上定義默認值。讓我舉個例子來解釋一下。

class App extends React.Component {
  componentDidMount() {
    const { count } = this.props
    console.log('count in CDM: ', count)
  }
  render() {
    const { count } = this.props
    console.log('count in Render: ', count)
    return{ count }}
}

App.propTypes = {
  count: PropTypes.number
}

App.defaultProps = {
  count: 10
}

如果運行此代碼，我們將得到：

count in Render:  10
count in CDM:  10

如您所見，在每個方法上，默認值都是相同的，因此我們可以確定，如果沒有傳遞prop，則所有地方的默認值都是相同的。

相反，如果使用默認參數(shù)，則每個類方法的屬性可能不同。

class App extends React.Component {
  componentDidMount() {
    const { count } = this.props
    console.log('count in CDM: ', count)
  }
  render() {
    const { count = 10 } = this.props
    console.log('count in Render: ', count)
    return{ count }}
}

App.propTypes = {
  count: PropTypes.number
}

在本例中，我們將得到以下結(jié)果：

count in Render:  10
count in CDM:  undefined

在組件的不同部分對同一道具使用不同的值是非常糟糕的。

最后的想法

這類事情提醒我，幾乎總是有可能編寫出正確的代碼，因此我們需要了解編寫應(yīng)用程序時所做決策的影響。這可以看作是一個小組件的問題，當(dāng)您可以隨時關(guān)注正在發(fā)生的一切時，但是一旦應(yīng)用程序變得更大，就很難跟蹤這種bug。