前端/移动开发面试题更新 2026-08-05

React 组件构造函数里为什么要先执行 super(props)?

前端/移动开发技术原理React

考察说明

考察对 React 类组件构造函数中 super(props) 作用的理解。

回答思路

  1. 【回答框架 1】super(props) 是 ES6 类继承中调用父类构造函数的语法,在 React 类组件中父类即 React.Component。执行 super(props) 的目的是完成父类构造函数的初始化逻辑,使 this 被正确绑定到 React 组件实例上,并让组件实例具备 React 内置的 props、state、refs 等核心属性与方法。
  2. 【回答框架 2】如果不调用 super(props),在构造函数中 this 尚未被初始化,无法访问 this.props、this.state 等属性,会导致 ReferenceError。按 ES6 规则,派生类构造函数必须先调用 super 才能使用 this。
  3. 【回答框架 3】super(props) 会将传入的 props 传递给父类构造函数,父类将 props 挂载到 this.props 上,从而在构造函数内部可以访问 this.props。若未传参,this.props 可能为 undefined,但 React 仍会在组件实例化后重新设置 props,因此在构造函数外(如 render、生命周期方法)仍能访问 this.props。
  4. 【回答框架 4】调用 super(props) 后,可以安全地在构造函数中基于 this.props 初始化 state(例如将 props 中某些值作为初始 state),或绑定事件处理函数。若不调用,则无法使用 this 进行任何操作。
  5. 【关键点 1】super(props) 用于调用 React.Component 构造函数,初始化组件实例。
  6. 【关键点 2】必须在构造函数中先调用 super(props) 才能使用 this。
  7. 【关键点 3】super(props) 将 props 传给父类,使 this.props 在构造函数内可用。
  8. 【关键点 4】未调用 super,构造函数中会因 this 未初始化而报错。
  9. 【易错点 1】super() 后访问 this.props 在构造函数中可能为 undefined,但组件挂载后 this.props 会被重新赋值。
  10. 【易错点 2】部分开发者误以为 super(props) 是 React 特有语法,实际是 ES6 类继承的通用要求。
  11. 【易错点 3】在构造函数中直接修改 this.props 不是推荐做法,props 应被视为不可变。