默认属性和逻辑或运算符

Question

我最近开始使用React，我倾向于像这样定义默认值：

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相比，这种方法有哪些缺点？

- sleepwalker00

Answer 1

与使用defaultProps相比，这种方法有什么缺点？

在您特定的代码示例中没有缺点，因为您只使用了每个prop一次。但是，在大型应用程序中想象一下，某个prop在许多地方使用，如果该值为falsy，则手动定义“回退值”将变得非常繁琐。

另外，想象一下如果您突然决定将此值更改为其他值; 那么您将不得不浏览整个组件并更新使用该特定prop的所有位置。这会使其容易出现错误和失误。

您的方法的另一个问题是，如果您确实希望特定prop为falsy，例如null或0。那么您的条件将失败，并且将使用“回退值”。

因此，基本上使用defaultProps使管理props变得更加容易和全面。顺便说一句，对于您的参考，您使用的逻辑表达式称为短路求值。

- Chris

Answer 2

这两种方法都是正确的，但如果您需要在多个地方使用props时应该怎么办？您将不得不在代码的各个地方编写逻辑操作。而默认props可以只定义一次并且无需任何问题即可重复使用。

然而，您可以使用任意一种方式，这只是一种编码风格的问题。

- return007