React功能组件默认props与默认参数

Question

在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>
)    

Answer 1

一般来说(ES6),第二种方式更好.

具体而言(在React上下文中),第一个更好,因为它是组件生命周期中的主要阶段,即初始化阶段.

请记住,ReactJS是在ES6之前发明的.

Answer 2

第一个可能会导致一些难以调试的性能问题，特别是当您使用 redux 时。

如果您使用对象、列表或函数，那么这些将是每次渲染时的新对象。如果您有复杂的组件来检查组件身份以查看是否应该进行重新渲染，这可能会很糟糕。

const Component = ({ prop1 = {my:'prop'}, prop2 = ['My Prop'], prop3 = ()=>{} }) => {(
  <div>Hello</div>
)}

现在工作正常，但如果您有更复杂的组件和状态，例如带有数据库连接和/或 React useffect 挂钩的 React-Redux 连接组件，以及组件状态，这可能会导致大量重新渲染。

通常更好的做法是单独创建默认的 prop 对象，例如。

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

Component.defaultProps = {
  prop1: {my:'prop'},
  prop2: ['My Prop'],
  prop3: ()=>{}
}

或者

const defaultProps = {
  prop1: {my:'prop'},
  prop2: ['My Prop'],
  prop3: ()=>{}
}
const Component = ({
  prop1 = defaultProps.prop1,
  prop2 = defaultProps.prop2
  prop3 = defaultProps.prop3
 }) => (
  <div>Hello</div>
)

Answer 3

defaultProps最终将不赞成使用功能性组件上的组件（根据核心团队之一Dan Abramov的观点），因此，为了将来进行验证，值得使用默认参数。