欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

React 类组件：super()与 super(props)的区别与底层逻辑解析

2026-08-16 分类：服务器技术 阅读(3) 评论(0)

一、引言：为何关注 super 调用

1.1 React 类组件的构造函数背景

  • 在 React 开发中，类组件是通过 ES6 的 class 语法编写的，它必须继承自 React.Component。
  • 根据ES6 的语法规则，子类必须在 constructor 构造函数中调用 super 方法，否则在构造函数中使用 this 会报错。
  • 这是因为子类自己的 this 对象必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。

    • 1.2 问题的提出：super()还是 super(props)

  • 在许多 React 教程和实际项目中，我们经常会看到两种写法：一种是只写 super()，另一种是传入参数 super(props)。
  • 这就引出了一个经典问题：在 React 中,superO和 super(props)有什么区别? (注: superO 通常为 super() 的输入笔误)。
  • 它们在功能表现上似乎都能让组件正常渲染，但在构造函数内部访问 this.props 时，行为却大相径庭。

    • 二、核心剖析：super()与 super(props)的区别

    2.1 语法层面的差异与 this 指向

  • 调用 super() 时，不传递任何参数，React.Component 的构造函数虽然执行了，但此时传入父类构造函数的 props 参数为 undefined。
  • 调用 super(props) 时，将组件的 props 属性传递给了父类的构造函数，此时父类构造函数内部可以正常接收到 props。
  • 只有在 super 执行之后，子类的 this 对象才算被完全初始化，之后才能在 constructor 中使用 this。

    • 2.2 this.props 的可用性分析

  • 如果在 constructor 中调用了 super() 但没有传参，那么在 constructor 内部访问 this.props 会返回 undefined。
  • 如果调用了 super(props)，在 constructor 内部就可以直接通过 this.props 获取到外部传入的属性值。
  • 无论使用哪种方式，当 constructor 执行完毕后，React 内部机制都会将 props 挂载到 this 实例上，因此在 render 函数中 this.props 始终是可用的。

    • 2.3 流程图：组件挂载与 props 初始化过程

  • 下面通过 mermaid 流程图展示 React 在实例化组件时，super 调用与 props 挂载的具体流程。

    • #publish-mermaid-1785721471796-0{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785721471796-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785721471796-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785721471796-0 .error-icon{fill:#552222;}#publish-mermaid-1785721471796-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785721471796-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785721471796-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785721471796-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785721471796-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785721471796-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785721471796-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785721471796-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785721471796-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785721471796-0 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785721471796-0 p{margin:0;}#publish-mermaid-1785721471796-0 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785721471796-0 .cluster-label text{fill:#333;}#publish-mermaid-1785721471796-0 .cluster-label span{color:#333;}#publish-mermaid-1785721471796-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785721471796-0 .label text,#publish-mermaid-1785721471796-0 span{fill:#333;color:#333;}#publish-mermaid-1785721471796-0 .node rect,#publish-mermaid-1785721471796-0 .node circle,#publish-mermaid-1785721471796-0 .node ellipse,#publish-mermaid-1785721471796-0 .node polygon,#publish-mermaid-1785721471796-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785721471796-0 .rough-node .label text,#publish-mermaid-1785721471796-0 .node .label text,#publish-mermaid-1785721471796-0 .image-shape .label,#publish-mermaid-1785721471796-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785721471796-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785721471796-0 .rough-node .label,#publish-mermaid-1785721471796-0 .node .label,#publish-mermaid-1785721471796-0 .image-shape .label,#publish-mermaid-1785721471796-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785721471796-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785721471796-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785721471796-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785721471796-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785721471796-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785721471796-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785721471796-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785721471796-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785721471796-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785721471796-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785721471796-0 .cluster text{fill:#333;}#publish-mermaid-1785721471796-0 .cluster span{color:#333;}#publish-mermaid-1785721471796-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785721471796-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785721471796-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785721471796-0 .icon-shape,#publish-mermaid-1785721471796-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785721471796-0 .icon-shape p,#publish-mermaid-1785721471796-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785721471796-0 .icon-shape .label rect,#publish-mermaid-1785721471796-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785721471796-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785721471796-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785721471796-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785721471796-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785721471796-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785721471796-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785721471796-0 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}是否

    React 实例化类组件

    调用 constructor 构造函数

    执行 super 调用

    是否传递 props 参数

    父类构造函数接收 props

    当前实例 this.props 被赋值

    继续执行 constructor 后续逻辑

    父类构造函数接收 undefined

    当前实例 this.props 为 undefined

    constructor 执行完毕

    React 内部将 props 挂载到实例

    触发 render 生命周期

    this.props 正常可用

    三、底层原理：React 源码中的 props 挂载机制

    3.1 React.Component 的构造函数逻辑

  • 查看 React 的源码，你会发现 React.Component 基础类的构造函数非常简单，大致逻辑为 function Component(props, context, updater) { this.props = props; this.context = context; }。
  • 当你在子类 constructor 中调用 super(props) 时，实际上就是显式地将 props 传递给了父类的构造函数，父类将 props 挂载到了 this 上。
  • 如果你不传 props，父类构造函数中的 this.props 就会被赋值为 undefined。

    • 3.2 为什么外部不需要传 props 也能渲染

  • 尽管 super() 会导致 constructor 内部的 this.props 为 undefined，但组件依然能够正常渲染。
  • 这是因为 React 在实例化组件后，会在外部自动执行一个挂载操作，类似于 instance.props = props。
  • 这就解释了为什么在 render 生命周期或其它自定义方法中，this.props 始终能获取到正确的值，而在 constructor 内部如果未传参则会缺失。

    • 3.3 总结与最佳实践建议

  • 在 React 中,superO和 super(props)有什么区别? 答案在于 constructor 内部 this.props 的可用性。
  • 强烈建议在编写 React 类组件的 constructor 时，始终使用 super(props)，这样能避免构造函数内部因 this.props 未定义而引发的潜在 Bug。
  • 只有在构造函数中完全不依赖 this.props 的情况下，super() 才是安全的，但为了代码的一致性和可维护性，传递 props 是更佳的实践规范。
    • 赞(0)
    未经允许不得转载：171主机测评 » React 类组件：super()与 super(props)的区别与底层逻辑解析
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(57528)#python(19619)#开发语言(16517)#java(15169)#运维(15097)#linux(14730)#大数据(14302)#服务器(12862)#算法(11563)#前端(10655)#网络(9178)#数据库(8716)#ai(8604)#c++(8014)#课程设计(6755)#学习(6620)#机器学习(6586)#区块链(5828)#OpenClaw(5374)#后端(5042)#spring boot(4952)#深度学习(4824)#c语言(4310)#毕业设计(4273)#数据结构(4130)#安全(3924)#docker(3879)#架构(3758)#javascript(3744)#大模型(3583)

    热门文章

    最新文章

    归档

    分类