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

defaultProps上的功能组件将eventually be deprecated (as per Dan Abramov, one of the core team)，因此，为了将来验证，值得使用默认参数。

Answer 3

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

无耻的插件，我是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>
}

Answer 5

甚至您可能会问，为什么不将下面的代码与props || 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并使用||运算符进行控制可能会使您的代码看起来丑陋

Answer 6

如果您有一些想要设置其默认值的参数，则可能要尝试一下

const MyComponent = (props) => {

    const {title, status} = props

    const safeTitle = title || 'My default title'

    // in case its a number (status may be 0):
    const safeStatus = status === undefined ? 1 : status
}

Answer 7

以下是关于弃用 defaultProps 的官方公告。

https://github.com/reactjs/rfcs/pull/107

Answer 8

要在此处消除一些混乱：

“默认参数”语法无效。

ES6默认参数可以远程应用到React功能组件的唯一方法是

const Component = (props = { prop : 'Don't ever do this' }) {
    ...
}

这将初始化一个undefined props参数，该参数永远不会发生，因为当您未定义props时，React将提供一个null props对象。

如果发生，它将在仅给出 all 道具的情况下仅替换 all 道具，这完全不是React默认道具所做的，即独立为各个道具提供默认值。

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

8 个答案: