反应功能组件默认道具与默认参数

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

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

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

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

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

无耻的插件，我是with-default-props的作者。

如果您是TypeScript用户，with-default-props可能会为您提供帮助，它使用高阶函数在给定defaultProps的情况下提供正确的组件定义。

例如。

import { withDefaultProps } from 'with-default-props'

type Props = {
    text: string;
    onClick: () => void;
};

function Component(props: Props) {
    return <div onClick={props.onClick}>{props.text}</div>;
}

// `onClick` is optional now.
const Wrapped = withDefaultProps(Component, { onClick: () => {} })


function App1() {
    // ✅
    return <Wrapped text="hello"></Wrapped>
}

function App2() {
    // ✅
    return <Wrapped text="hello" onClick={() => {}}></Wrapped>
}

function App3() {
    // ❌
    // Error: `text` is missing!
    return <Wrapped onClick={() => {}}></Wrapped>
}

第一个可能导致一些难以调试的性能问题，尤其是在使用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>
)

甚至您可能会问，为什么不像下面的代码那样使用sthprops || value而不是defaultProps：

class SomeComponent extends React.Component {
  render() {
    let data = this.props.data || {foo: 'bar'}
    return (
      <div>rendered</div>
    )
  }
}

// SomeComponent.defaultProps = {
//   data: {foo: 'bar'}
// };

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)

但是请记住defaultProps使代码更具可读性，特别是如果您有更多代码props并且用||运算符控制它们可能会使您的代码看起来难看