react super中的props
有的小伙伴每次写组件都会习惯性在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的更多相关文章
- react native中对props和state的理解
最近使用react native这个新的技术做完一个项目,所以赶紧写个博客巩固一下. 今天我想说的是props和state,当然这是我个人的理解,如果有什么不对的地方,望指正. 首先我先说说props ...
- react组件中的constructor和super小知识
react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...
- React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
- react native中props的使用
react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- 规避 React 组件中的 bind(this)
React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Com ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- Python:pip 和pip3的区别
前言 装完python3后发现库里面既有pip也有pip3,不知道它们的区别,因此特意去了解了一下. 解释 先搜索了一下看到了如下的解释, 安装了python3之后,库里面既会有pip3也会有pip ...
- vue样式加scoped后不能覆盖组件的原有样式解决方法
<style scoped> </style> 为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的 ...
- 通过页码直接跳转 html
<?php namespace Admin\TagLib; class BootstrapPage{ public $firstRow; // 起始行数 public $listRows; // ...
- H3C 单路径网络中环路产生过程(3)
- UVa 1374 - Power Calculus——[迭代加深搜索、快速幂]
解题思路: 这是一道以快速幂计算为原理的题,实际上也属于求最短路径的题目类型.那么我们可以以当前求出的幂的集合为状态,采用IDA*方法即可求解.问题的关键在于如何剪枝效率更高.笔者采用的剪枝方法是: ...
- Nginx的三种应用场景介绍
配置虚拟主机 就是在一台服务器启动多个网站. 如何区分不同的网站: 1.域名不同 2.端口不同 1.1. 通过端口区分不同虚拟机 Nginx的配置文件: /usr/local/nginx/conf/n ...
- 深度解读 - TDD详细(测试驱动开发)
本文结构: 什么是 TDD 为什么要 TDD 怎么 TDD FAQ 学习路径 延伸阅读 什么是 TDD TDD 有广义和狭义之分,常说的是狭义的 TDD,也就是 UTDD(Unit Test Driv ...
- 2018-6-29-PTA-6-2-多项式求值
title author date CreateTime categories PTA 6-2 多项式求值 lindexi 2018-06-29 15:24:28 +0800 2018-6-14 22 ...
- 【p082】排座椅
Time Limit: 1 second Memory Limit: 50 MB [问题描述] 上课的时候总有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了 ...
- Linux 内核 NuBus 总线
另一个有趣的, 但是几乎被忘记的, 接口总线是 NuBus. 它被发现于老的 Mac 计算机(那 些有 M68K CPU 家族的). 所有的这个总线是内存映射的(象 M68K 的所有东西), 并且设备 ...