React 函数组件默认属性与默认参数

javascript ecmascript-6 reactjs

2022-08-30 03:00:41

在 React 函数组件中，这是设置默认 props 的更好方法，使用函数定义上的默认参数，例如：Component.defaultProps

默认道具：

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

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

默认参数：

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

答案 1

defaultProps功能组件最终将被弃用（根据核心团队之一Dan Abramov的说法），因此为了适应未来，值得使用默认参数。

答案 2

一般来说（ES6），第二种方式更好。

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

请记住，ReactJS 是在 ES6 之前发明的。