面试题：React 中 defaultProps 在函数式组件和类组件中的使用差异及场景对比

Question

在 React 开发中，函数式组件和类组件都可以使用 defaultProps 来设置默认属性值。请分析这两种组件在使用 defaultProps 时，在语法、特性以及适用场景上有哪些差异，并通过代码示例进行说明。

Answer 1

语法差异

• 函数式组件：在函数式组件外直接定义 defaultProps 对象。

import React from'react';

const FunctionalComponent = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

FunctionalComponent.defaultProps = {
  name: 'Guest'
};

export default FunctionalComponent;

• 类组件：在类内部定义 static defaultProps 对象。

import React, { Component } from'react';

class ClassComponent extends Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

ClassComponent.static defaultProps = {
  name: 'Guest'
};

export default ClassComponent;

特性差异

• 函数式组件：函数式组件是无状态和无实例的，defaultProps 简单直接。它依赖于外部传入的 props 来渲染，在重新渲染时，如果 props 没有变化，可能会有更好的性能优化（如 React.memo 可以帮助减少不必要渲染）。
• 类组件：类组件有自己的状态（state）和生命周期方法。defaultProps 在类实例化时就会应用，并且在组件生命周期内一直存在。如果在类组件中更新 props，defaultProps 不会再次应用，除非组件重新创建。

适用场景差异

• 函数式组件：适用于简单的展示型组件，这些组件只根据传入的 props 进行渲染，不涉及复杂的状态管理和生命周期逻辑。例如导航栏、按钮等纯展示组件。
• 类组件：适用于需要管理内部状态、处理复杂的生命周期逻辑（如 componentDidMount、componentDidUpdate 等）的场景。例如需要在组件挂载时发起网络请求，并根据请求结果更新状态的组件。