在 React功能组件中，这是设置默认props、使用Component.defaultProps或使用函数定义上的默认参数的更好方法，示例：
默认props：
const Component = ({ prop1, prop2 }) => (
<div></div>
)
Component.defaultProps = {
prop1: false,
prop2: 'My Prop',
}
默认参数：
const Component = ({ prop1 = false, prop2 = 'My Prop' }) => (
<div></div>
)
defaultProps在功能组件上最终将被弃用（根据核心团队之一丹·阿布拉莫夫的说法），因此为了面向未来，值得使用默认参数。
一般来说（ES6），第二种方式更好。
具体来说（在 React 上下文中），第一个更好，因为它是组件生命周期中的一个主要阶段，即初始化阶段。
请记住，ReactJS 是在 ES6 之前发明的。
第一个可能会导致一些难以调试的性能问题，尤其是在您使用 redux 时。
如果您正在使用对象或列表或函数，那么这些将是每次渲染时的新对象。如果您有复杂的组件来检查组件身份以查看是否应该进行重新渲染，这可能会很糟糕。
const Component = ({ prop1 = {my:'prop'}, prop2 = ['My Prop'], prop3 = ()=>{} }) => {(
<div>Hello</div>
)}
现在工作正常，但是如果您有更复杂的组件和状态，例如带有数据库连接和/或 react useffect 钩子的 react-redux 连接组件，以及组件状态，这可能会导致大量重新渲染。
通常更好的做法是单独创建默认的props对象，例如。
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>
)
无耻的插件在这里，我是 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>
}
甚至你可能会问，为什么不使用下面的代码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并且使用||运算符控制它们可能会使您的代码看起来很丑陋