面试题：React 中 defaultProps 的常见使用场景有哪些

Question

请详细阐述 React 中 defaultProps 在实际项目开发里，一般会在哪些场景下使用，并举例说明。

Answer 1

在 React 中 defaultProps 的使用场景及示例

1. 为组件属性提供默认值
   • 场景：当组件接收的某些属性在大多数情况下有固定的默认值，且在使用组件时如果不传入该属性，也希望组件能以一种合理的状态展示。例如，一个按钮组件，通常有一个默认的文本显示。
   • 示例：

import React from'react';

const Button = ({ text, onClick }) => {
    return <button onClick={onClick}>{text}</button>;
};

Button.defaultProps = {
    text: '点击我'
};

export default Button;

在这个例子中，如果在使用 <Button> 组件时没有传入 text 属性，按钮将显示默认文本“点击我”。

2. 减少重复代码
   • 场景：对于一些经常使用且属性配置相对固定的组件，通过 defaultProps 设置默认值可以避免每次使用时都重复传入相同的属性值。比如一个卡片组件，通常有固定的背景颜色和边框样式。
   • 示例：

import React from'react';

const Card = ({ title, content, bgColor, border }) => {
    const style = {
        backgroundColor: bgColor,
        border: border
    };
    return (
        <div style={style}>
            <h2>{title}</h2>
            <p>{content}</p>
        </div>
    );
};

Card.defaultProps = {
    bgColor: 'lightgray',
    border: '1px solid gray'
};

export default Card;

这样在使用 <Card> 组件时，如果没有特别指定 bgColor 和 border，就会使用默认值，减少了代码冗余。

3. 方便组件的测试和调试
   • 场景：在单元测试组件时，defaultProps 能保证组件在没有传入完整属性集的情况下也能正常渲染，便于测试组件的基本功能。同时，在调试过程中，默认值可以帮助开发者快速定位问题，因为组件在默认状态下应该是能正常工作的。
   • 示例：假设我们要测试上面的 Button 组件，在测试用例中，即使不传入 text 属性，由于有 defaultProps，组件依然可以渲染出带有默认文本的按钮，方便测试其点击功能等。

import React from'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('Button clicks and calls onClick', () => {
    const handleClick = jest.fn();
    const { getByText } = render(<Button onClick={handleClick} />);
    fireEvent.click(getByText('点击我'));
    expect(handleClick).toHaveBeenCalled();
});