react组件中的constructor和super知识点整理

1、react中用class申明的类一些小知识

如上图：类Child是通过class关键字申明，并且继承于类React。

A、Child的类型是？ typeofChild === 'function' ， 其实就相当于ES5用function申明的构造函数 function Child() { //申明构造函数 }

B、Child类调用时候( new Child() )，会优先执行，并且自动执行Child的constructor函数。

constructor() {
   console.log('执行了constructor')
       return 'hah'
   }

   getName() {
       console.log('执行了方法')
   }
}
var dd = new Person();
console.log(dd)

打印如下：

3、Child类中的this？ this指向Child的实例，相当于 new Child() 那么它们完全相等吗？ 不是的，react中的this是在new Child()基础上进行了包裹（下图）。

上图为new Child（） 下图为 Child中的this

结论：this是在new Child()基础上进行了包裹，包含了一些react内部方法，

同时组件中使用Child类( <div> <Child /> </div> )，可以看成 new Child（） + react包裹。（细节待追究。。。）

2、组件中的constructor是否有必要？ 如果没有呢？？作用呢？？？

ES6的知识补充： http://es6.ruanyifeng.com/ 如下：

class ColorPoint extends Point {
}

// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}
// 可见没有写constructor，在执行过程中会自动补上

由ES6的继承规则得知，不管子类写不写constructor，在new实例的过程都会给补上constructor。

所以：constructor钩子函数并不是不可缺少的，子组件可以在一些情况略去。

接下来，继续看下有没有constructor钩子函数有什么区别：

A、先看有无constructor钩子函数的 this.constructor

有constructor钩子函数的 this.constructor

无constructor钩子函数的 this.constructor

如果能看细节的话，会得知有constructor钩子函数时候，Child类会多一个constructor方法。

B、再看有无先看有无constructor钩子函数的 this，也就是组件实例。

有constructor钩子函数的 this实例。

无constructor钩子函数的 this实例。

会得知有constructor钩子函数时候，可以定义state，如果用户不定义state的话，有无constructor钩子函数时候没有区别。

结论： 如果组件要定义自己的state初始状态的话，需要写在constructor钩子函数中，

如果用户不使用state的话，纯用props接受参数，有没有constructor钩子函数都可以，可以不用constructor钩子函数。

再者如果不使用state，那么为什么不使用 无状态组件（建议使用）呢？？？

3、super中的props是否必要？ 作用是什么？？

有的小伙伴每次写组件都会习惯性在constructor和super中写上props，那么这个是必要的吗？？

如图：

首先要明确很重要的一点就是：

可以不写constructor，一旦写了constructor，就必须在此函数中写super(),

此时组件才有自己的this，在组件的全局中都可以使用this关键字，

否则如果只是constructor 而不执行 super() 那么以后的this都是错的！！！

来源ES6 ：http://es6.ruanyifeng.com/

但是super中必须写参数props吗？？ 答案是不一定，先看代码：

有props：

无props：

可以得出结论：当想在constructor中使用this.props的时候，super需要加入(props)，

此时用props也行，用this.props也行，他俩都是一个东西。（不过props可以是任意参数，this.props是固定写法）。

如图：

如果在custructor生命周期不使用 this.props或者props时候，可以不传入props。

下面是一个使用props的场景，此时别忘了componentWillReceiveProps 生命周期哟。

参考另一篇文章react的生命周期需要知道的

接上：如果constructor中不通过super来接收props，在其他生命周期，

诸如componentWillMount、componentDidMount、render中能直接使用this.props吗？？

结论：可以的，react在除了constructor之外的生命周期已经传入了this.props了，完全不受super(props)的影响。

所以super中的props是否接收，只能影响constructor生命周期能否使用this.props，其他的生命周期已默认存在this.props

到此这篇关于react组件中的constructor和super知识点整理的文章就介绍到这了,更多相关react组件constructor和super内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • MapStruct到底是什么?

    MapStruct到底是什么?

    一.简介 现在的分布式系统中模块划分越来越细,不同模块的实体.DTO.DO等需要进行转换,这么多工程处理起来不是那么简单. MapStruct 就是这样的一个属性映射插件,用于为Java Bean生成类型安全且高性能的映射.它基于编译阶段生成get/set代码,此实现过程中没有反射,不会造成额外的性能损失.只需要定义一个 Mapper 接口,MapStruct 就会自动实现这个映射接口,避免了繁琐的映射实现.

  • Java MapStruct解了对象映射的毒

    Java MapStruct解了对象映射的毒

    前言 MVC模式是目前主流项目的标准开发模式,这种模式下框架的分层结构清晰,主要分为Controller,Service,Dao.分层的结构下,各层之间的数据传输要求就会存在差异,我们不能用一个对象来贯穿3层,这样不符合开发规范且不够灵活. 我们常常会遇到层级之间字段格式需求不一致的情况,例如数据库中某个字段是datetime日期格式,这个时间戳在数据库中的存储值为2020-11-06 23:59:59.999999,但是传递给前端的时候要求接口返回yyyy-MM-dd的格式,或者有些数据在数据

  • C#调用C类型dll入参为struct的问题详解

    前言 C# 可以通过 DllImport 的方式引用 C 类型的 dll.但很多 dll 的参数不会是简单的基础类型,而是结构体 struct .因此就需要在 C# 端定义同样的结构体类型,才能实现调用 C 类型 dll.这里例举几种不同的结构体情况,以及其对应的解决方案. 基础调用方式 对于一个结构体类型: typedef struct DATA { int nNumber; float fDecimal; }; 在 C# 端就需要定义为 [StructLayout(LayoutKind.Se

  • Go 使用Unmarshal将json赋给struct出错的原因及解决

    例如: 将json: { "name": "Laura" "age": "18" } 赋给struct: type PersonalInfo struct { Name string `json:"name"` Age string `json:"age"` } 用语句: person := PersonalInfo{} err := json.Unmarshal(json, &

  • Go遍历struct,map,slice的实现

    遍历结构体 如何实现遍历结构体字段? 好吧,言归正传!举个例子: demo1: package main import ( "fmt" "reflect" ) type Student struct { name string age int } func main() { v := reflect.ValueOf(Student{"乔峰", 29}) count := v.NumField() for i := 0; i < count;

  • golang struct, map, json之间的相互转换

    本文用于记录我在 golang 学习阶段遇到的类型转换问题,针对的是 json .map.struct 之间相互转换的问题,用到的技术 json .mapstructure.reflect 三个类库 公共代码区域 package main import ( "encoding/json" "fmt" "testing" ) type UserInfoVo struct { Id string `json:"id"` UserN

  • Java Structs框架原理案例详解

    Java Structs框架原理案例详解

    1 Struts2框架内部执行过程 Structs请求过程源码分析参考链接http://www.cnblogs.com/liuling/p/2013-8-10-01.html 从上图来看,整个框架的运行过程是围绕着核心过滤器StrutsPrepareAndExecuteFilter展开工作,深入到filter的源码会对理解有所帮助. 一个请求在Struts的处理中大概有以下几个步骤: 客户端初始化一个指向Servlet容器(Tomcat)的请求: 这个请求经过一系列的过滤器(Filter)例如A

  • golang 生成对应的数据表struct定义操作

    在开发过程中,常常需要将数据库表对应到golang的一个struct,特别是使用一些ORM工具,sqlx库等,我是个懒人,即使数据表的字段不多,我也懒得去一个个对应的敲入代码,更别提数据表字段比较多的情况了,码农的时间,不能浪费在这啊,对吧?所以我在想,是不是有办法可以自动生成. 我在工作时,用得最多的是mysql了,因此 本文针对mysql的数据表来自动生成golang 的struct定义 mysql有个自带的数据库information_schema,里面的信息量比较多,朋友们可以去百度下,

  • react组件中的constructor和super知识点整理

    react组件中的constructor和super知识点整理

    1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类型是? typeofChild === 'function' , 其实就相当于ES5用function申明的构造函数 function Child() { //申明构造函数 } B.Child类调用时候( new Child() ),会优先执行,并且自动执行Child的constructor函数. constructor() { console.log('执

  • React 组件中的 bind(this)示例代码

    React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &

  • react组件中过渡动画的问题解决

    目录 一.是什么 二.如何实现 CSSTransition SwitchTransition TransitionGroup 一.是什么 在日常开发中,页面切换时的转场动画是比较基础的一个场景 当一个组件在显示与消失过程中存在过渡动画,可以很好的增加用户的体验 在react中实现过渡动画效果会有很多种选择,如react-transition-group,react-motion,Animated,以及原生的CSS都能完成切换动画 二.如何实现 在react中,react-transition-g

  • React路由中的redux和redux知识点拓展

    目录 路由中使用redux 路由reducer Redux拓展 state拓展 action拓展 静态action 动态action 异步action 异步action中间件 路由中使用redux 在路由中使用redux只需要两步: 第一步 在路由策略组件中(如HashRouter),渲染Route组件,并在该Route路由规则组件中,引入connect方法处理后的应用程序组件 第二步 在Provider组件中,渲染路由策略组件(如HashRouter). 注意:路由规则渲染组件的时候,路由规则

  • Hibernate中5个核心接口知识点整理

    Hibernate是一个全自动的orm框架,hibernate可以自动生成SQL语句,自动执行,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库,同时Hibernate作为持久层中间件,它的具体实现对与上层调用是透明的,即上层通过接口来调用Hibernate的具体实现,所以对于入门级别的讨论来说,自然应该先从接口开始了. 1.Configuration核心接口 在Hibernate应用中通过Configuration的实例来指定对象-关系映射文件或通过Configuration动态配

  • React组件中的this的具体使用

    React组件的this是什么 通过编写一个简单组件,并渲染出来,分别打印出自定义函数和render中的this: import React from 'react'; const STR = '被调用,this指向:'; class App extends React.Component{ constructor(){ super() } //测试函数 handler() { console.log(`handler ${STR}`,this); } render(){ console.log

  • 在React 组件中使用Echarts的示例代码

    在React 组件中使用Echarts的示例代码

    在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的 这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件

  • React 组件中的state和setState()你知道多少

    目录 state的基本使用 setState()修改状态 解决方法: 总结 state的基本使用 状态(state)即数据,是组件内部的私有数据,只能在组件内部使用 state的值是对象,可以通过this.state来获取状态. setState()修改状态 状态是可变的,可以通过this.setState({要修改的数据})来改变状态 注意:跟vue语法不同,不要直接修改state中的值,这时错误的! //正确 this.setState({ count:this.state.count+1

  • jQuery中常用动画效果函数知识点整理

    jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo():把被选元素逐渐改变至给定的不透明度. hide():隐藏被选的元素. que

  • React组件封装中三大核心属性详细介绍

    目录 1.介绍 2.state 概念 演示 3.props 概念 props与state区别 4.refs 概念 refs种类 5.父子组件 什么是父子组件 父子组件之间传值 1.介绍 React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state.props.refs. 2.state 概念 state是类组件的一个默认属性,用于标识类组件的状态,负责更新UI,让页面动态变化,当state变化时,组件将被重新渲染. 函数组件没有对象属性(babel默认开启了局

随机推荐