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

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

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

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

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

来源ES6 : http://es6.ruanyifeng.com/#docs/class-extends   

但是super中必须写参数props吗??   答案是不一定,先看代码:

有props:

无props:

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

 

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

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

如图:

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

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

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

转载作者 : 一直在寻

来源 :https://www.cnblogs.com/faith3/p/9219446.html

react super中的props的更多相关文章

  1. react native中对props和state的理解

    最近使用react native这个新的技术做完一个项目,所以赶紧写个博客巩固一下. 今天我想说的是props和state,当然这是我个人的理解,如果有什么不对的地方,望指正. 首先我先说说props ...

  2. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  3. React Native中组件的props和state

    一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...

  4. react native中props的使用

    react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...

  5. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  6. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  7. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  8. 规避 React 组件中的 bind(this)

    React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Com ...

  9. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. ubuntu 运行级别initlevel

    Linux 系统任何时候都运行在一个指定的运行级上,并且不同的运行级的程序和服务都不同,所要完成的工作和要达到的目的都不同,系统可以在这些运行级之间进行切换,以完成不同的工作.Ubuntu 的系统运行 ...

  2. java Math和Random和UUID

    Math类 public final class Math extends Object 以下X表示double,float,int, long abs(X x):求绝对值 max(X x1,X x2 ...

  3. 2018-8-10-WPF-判断调用方法堆栈

    title author date CreateTime categories WPF 判断调用方法堆栈 lindexi 2018-08-10 19:16:53 +0800 2018-2-13 17: ...

  4. linux scull 中的缺陷

    让我们快速看一段 scull 内存管理代码. 在写逻辑的深处, scull 必须决定它请求的内 存是否已经分配. 处理这个任务的代码是: if (!dptr->data[s_pos]) { dp ...

  5. PowerShell 拿到最近的10个系统日志

    我最近发现我的程序总是调用一些不清真的代码,于是在运行的时候就退出了,我想要拿到系统的日志知道我的程序是怎么退出的,我如何通过 PowerShell 拿到最近的10个系统日志.为什么需要拿到最新10个 ...

  6. 【hdu 1849】Rabbit and Grass

    Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  7. HDU6333 莫队+组合数学

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6333 题意: T次询问,每次询问n个苹果中最多拿m个苹果的方法数 题解: 因为T为1e5,所以直接做时间 ...

  8. 一目了然 | 数据库实例性能调优利器:Performance Insights

    Performance Insights是什么 阿里云RDS Performance Insights是RDS CloudDBA产品一项专注于用户数据库实例性能调优.负载监控和关联分析的利器,以简单直 ...

  9. python3中lambda函数

    def make_repeater(n): return lambda s:s*n twice=make_repeater(2) print(twice('wwss')) print(twice(2) ...

  10. 【萌新向】cartographer_ros最新安装指南 2019-12

    首先说明,这篇文章于2019年12月写下,cartographer现在还在不断更新,也许这篇文档内容会失效,但是大体是一样的安装流程. 一.硬件条件 使用平台 x86_64平台 ROS发行版 Indi ...