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