相关疑难解决方法(0)

在React 功能组件中,这是设置默认道具,使用Component.defaultProps或使用函数定义上的默认参数的更好方法,示例:

默认道具:

const Component = ({ prop1, prop2 }) => (
  <div></div>
)

Component.defaultProps = {
  prop1: false,
  prop2: 'My Prop',
}

默认参数:

const Component = ({ prop1 = false, prop2 = 'My Prop' }) => (
  <div></div>
)    

在我的一个无状态功能组件中设置默认值时,我刚刚遇到了关于React性能的问题.

这个组件有一个defaultProps定义的row: false,但我不喜欢它,因为defaultProps它位于文件的末尾,这实际上使它更难看.因此,我们不知道默认属性.所以我直接将它移动到函数声明中,并使用参数的ES6默认值进行分配.

const FormField = ({
  row = false,
  ...others,
}) => {
  // logic...
};

但后来我们与一位同事争论这是一个好主意.因为这样做可能看起来微不足道,但也可能对性能产生很大影响,因为反应不知道默认值.

我相信在这种情况下,它是微不足道的.因为它是布尔值而不是对象/数组,因此在对帐期间不会被视为不同的值.

但是,让我们现在看一个更高级的用例:

const FormField = ({
  input: { name, value, ...inputRest },
  label = capitalize(name),
  placeholder = label,
  row = false,
  meta: { touched, error, warning },
  ...others,
}) => {
  // logic...
};

在这里,我基于placeholderfrom 的值label,它本身就是基于的input.name.使用ES6解构和参数的默认值使整个事情很容易编写/理解,它就像一个魅力. …