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

在 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>
)
105752 次浏览
小开

一般来说(ES6) ，第二种方法更好。

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

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

小开

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

如果您正在使用对象、列表或函数，那么它们将是每次呈现时的新对象。 如果您的复杂组件检查组件标识以确定是否应该重新呈现，那么这种情况可能会很糟糕。

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

现在可以很好地工作了，但是如果您有更复杂的组件和状态，比如使用数据库连接进行反应-还原连接的组件和/或使用效果挂钩进行反应，以及组件状态，这可能会导致大量的重新呈现。

通常最好的做法是单独创建默认道具对象，例如。

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 用户，还有违约道具可能会帮助您，它使用更高阶的函数提供正确的组件定义，并给出了 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>
}
小开

功能组件上的 defaultProps将 最终被否决(根据核心团队之一丹•阿布拉莫夫(Dan Abramov)的说法)，所以为了防范未来，值得使用默认参数。

小开

也许你会问，为什么不用下面的代码代替 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和控制他们与 ||操作员可以使你的代码看起来难看

小开

这是关于 defaultProps废弃的官方声明。

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

小开

你可以使用非结构化方法，例如:

  const { inputFormat = 'dd/mm/yyyy', label = 'Default Text', ...restProps } = props;
小开

我不知道这是不是最好的办法，但它确实管用:)

export interface ButtonProps {
children: ReactNode;
type?: 'button' | 'submit';
}


const Button: React.FC<ButtonProps> = ({ children, type = 'button' }) => {
return (
<button type={type}
>
{children}
</button>
);
};

提交答案