面试题：React 组件的构造函数有什么作用？

React 组件的构造函数（constructor）是 ES6 类语法的一部分，在类组件 (Class Components) 中扮演着至关重要的角色。它的主要作用是在组件实例被创建时进行初始化设置。

构造函数的核心作用

1. 调用 super(props) —— 必须首先执行

这是构造函数中最重要且必须的第一步。

• 为什么？
  • 在 JavaScript 类中，子类的构造函数必须先调用 super() 才能使用 this 关键字。
  • React.Component 是父类，你的组件类是子类。调用 super(props) 会执行父类 (React.Component) 的构造函数，从而正确地初始化组件实例的基础功能和属性。
  • 如果你省略了 super(props) 或只写 super() 而不传 props，在构造函数中访问 this.props 会导致 undefined，即使在构造函数之后 this.props 是可用的。

class MyComponent extends React.Component {
  constructor(props) {
    super(props); // ✅ 必须调用，且传入 props
    // 现在可以安全地使用 this.props
    console.log(this.props); 
  }
  // ...
}

2. 初始化本地状态 (state)

这是构造函数最常见和最主要的用途之一。

• 你可以通过为 this.state 赋值来设置组件的初始状态。
• 在构造函数之外直接赋值给 this.state 是不允许的。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 初始化 state
    this.state = {
      count: 0,
      name: props.initialName || 'Guest' // 可以使用 props 来初始化 state
    };
  }
  // ...
}

3. 绑定事件处理函数的 this 上下文

在 ES6 类中，类方法不会自动绑定 this 到组件实例。如果你在 JSX 中使用 onClick={this.handleClick} 这样的写法，当事件触发时，handleClick 方法中的 this 可能会是 undefined。

• 在构造函数中使用 .bind(this) 可以预先将方法绑定到组件实例上。
• （现代 React 更推荐使用类字段语法或箭头函数来避免手动绑定）

class Button extends React.Component {
  constructor(props) {
    super(props);
    // 将 handleClick 方法绑定到组件实例
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 这里的 this 确保指向组件实例
    console.log('Button clicked!', this.state.count);
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

4. 创建 ref 引用

虽然现在更常用 React.createRef() 或 useRef Hook，但在类组件中，你也可以在构造函数中创建 ref。

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创建 ref
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      <>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.focusInput}>聚焦输入框</button>
      </>
    );
  }
}

5. 执行其他一次性初始化逻辑

• 例如，初始化一些不需要在 render 中使用的实例变量。
• 设置定时器（但通常 componentDidMount 更合适）。
• 建立外部连接等。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
    // 初始化一个实例变量来存储定时器 ID
    this.timerID = null;
  }
  // ...
}

何时可以省略构造函数？

• 如果你的组件不需要：
  1. 初始化 state。
  2. 绑定方法。
  3. 执行任何需要在挂载前完成的初始化逻辑。
• 那么你可以完全省略构造函数。React 会为你提供一个默认的构造函数。

// 完全合法，无需构造函数
class SimpleComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

函数组件中的“构造函数”？

函数组件没有构造函数的概念。它们的初始化逻辑通过 Hooks 来实现：

• useState：初始化和管理状态。
• useRef：创建引用。
• useCallback / useMemo：优化性能。
• useEffect：执行副作用（类似生命周期）。

总结

作用	说明
super(props)	✅ 必须调用，用于正确初始化组件实例。
初始化 state	使用 this.state = {...} 设置组件的初始状态。
绑定 this	使用 this.method = this.method.bind(this) 确保事件处理器中的 this 正确。
创建 ref	使用 this.ref = React.createRef() 创建对 DOM 元素的引用。
其他初始化	执行一次性设置，如初始化实例变量。

核心要点：构造函数是类组件的入口点，用于在组件诞生之初进行必要的设置。其中，调用 super(props) 是强制要求，而初始化 state 和绑定方法是最常见的用途。如果不需要这些，构造函数可以省略。