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

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

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

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

// 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組件中是否是一個(gè)有效的實(shí)踐，因?yàn)槲以谌魏蔚胤蕉紱]有見過它。即使這樣做是可行的，也有一些事情是行不通的，但它們并不是那么明顯。

PropTypes驗(yàn)證

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

這意味著，在定義proptypes時(shí)，將在props和默認(rèn)props中進(jìn)行驗(yàn)證，這些props和默認(rèn)props是使用static defaultProps或defaultProps方法設(shè)置的，而不是使用默認(rèn)參數(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`.

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

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

App.propTypes = {
  count: PropTypes.number
}

我們不會(huì)得到任何錯(cuò)誤或警告，因?yàn)镽eact沒有任何方法進(jìn)行運(yùn)行時(shí)分析。

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

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

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
}

如果運(yùn)行此代碼，我們將得到：

count in Render:  10
count in CDM:  10

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

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

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

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

最后的想法

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