defaultProps VS邏輯或

Question

我最近開始使用反應，我傾向於這樣定義的默認值：的

class TextInput extends Component { 
    render() { 
     return (
      <input 
       type="text" 
       name={ this.props.inputName || 'inputName' } 
       style={ this.props.inputStyle || {} } 
       className={ this.props.inputClass || '' } 
      /> 
     ); 
    } 
} 

代替：

class TextInput extends Component { 
    render() { 
     return (
      <input 
       type="text" 
       name={ this.props.inputName} 
       style={ this.props.inputStyle} 
       className={ this.props.inputClass} 
      /> 
     ); 
    } 
} 

TextInput.defaultProps = { 
    inputName: 'inputName', 
    inputStyle: {}, 
    inputClass: '' 
} 

沒有這種方法有對比有什麼缺點使用defaultProps ？

Answer 1

這種方法與使用defaultProps相比有什麼缺點？

在您特定的代碼示例中;沒有，因爲你只使用每個道具一次。但是，想象一下在很多地方使用特定道具的大型應用程序，如果該值是虛假的，手動定義「後退值」將變得非常繁瑣。

另外想象一下，如果你突然決定改變這個值到不同的東西;那麼您將不得不遍歷整個組件，並在使用該特定道具的地方進行更新。這會使其容易出錯和錯誤。

你的方法的另一個問題是，如果你真的做需要一個特定的道具是falsy，如null或0。那麼你的情況就會失敗，而使用「後備價值」來代替。

---

所以基本上，使用defaultProps使得管理你的道具更容易一點，更全面的和可管理的。

順便說一句，爲了供您參考，您使用的邏輯表達式稱爲Short-circuit evaluation。

Answer 2

這兩種方法的工作都是正確的。如果你必須在多個地方使用道具會怎麼樣？您將最終在代碼中的任何地方編寫邏輯操作。默認的道具可以定義一次，沒有任何問題。

但是，您可以使用任一種方式。它只是一個編碼風格的問題。