React中类定义组件constructor 和super
刚开始学习React没多久,在老师的教程里看到了类组件的使用示例,但是和资料上有些冲突,而引发了一些疑问:
- 类组件中到底要不要定义构造函数constructor()?
- super()里边到底要不要传入props参数?
- 绑定事件到底要不要在构造函数constructor()中进行?
查找资料,总结如下:
类组件:
定义组件可以使用函数定义组件和类定义组件() (推荐一篇随笔,创建组件的三种方式: https://www.cnblogs.com/wonyun/p/5930333.html)
简单说一下 函数定义组件和类定义组件的区别:
- 函数组件中无法使用state,也无法使用组件的生命周期方法;
- 函数组件都是展示性组件,接受props,渲染DOM;
- 函数组件中没有this,但在类组件中仍要绑定this这个琐碎的事,如:在render()方法中要使用this.props来替换props;
- 类组件中可以使用局部状态state和生命周期方法。
类定义组件实例:
class GreetingInput extends React.Component{
//构造函数
constructor(props){
super(props);//将props传入到构造方法中
this.state={name:"Tom"};//初始化state的值
this.switchName=this.switchName.bind(this);
}
//自定义的switchName方法,用作事件处理
switchName(){
if(this.state.name==="Tom"){
this.setState({name:"Jerry"});//修改state的值
}else{
this.setState({name:"Tom"});
}
}
//render方法 渲染在UI上的内容
render(){
return(
<div>
<h1>hello,{this.state.name}</h1>
<button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
</div>
);
} } ReactDOM.render(
<GreetingInput/>,document.getElementById("root")
);
问题一:类组件中到底要不要定义构造函数constructor()?
ES6中新增了类的概念,一个类必须要有constructor方法,如果在类中没有显示定义,则一个空的constructor方法会被默认添加;
一般需要在构造函数中初始化state和绑定事件,因此当需要初始化state或绑定事件时,需要显示定义constructor方法,并在constructor方法中初始化state和绑定事件
问题二:super()里边到底要不要传入props参数?
首先说明一点,若显示声明了constructor方法,则必须要调用super,即仅当存在constructor方法时,必须调用super
又是遇到一些示例中super()中没有传入参数props,super()和super(props)到底该怎么使用?
React会自行将props设置在组件中的 除了constructor方法 的任何地方 因此在组件的 非constructor方法中 使用props时,可不用传入,直接使用,
但当想要在constructor内使用props,则必须要将props传入super中,这样才能在constructor中访问到props,否则可以不用传入。
问题三:绑定事件到底要不要在构造函数constructor()中进行?
前面说了一般需要在构造函数中绑定事件,但需要使用bind,如果不想调用bind,也可以使用以下方法:
1、使用箭头函数初始化方法,则上边的例子就变为:
class GreetingInput extends React.Component{
//构造函数方法
constructor(props){
super(props);
this.state={name:"Tom"}; }
//自定义的switchName方法,用作事件处理 下边用的是属性初始化语法
switchName=()=>{
if(this.state.name==="Tom"){
this.setState({name:"Jerry"});
}else{
this.setState({name:"Tom"});
}
}
//render方法 渲染在UI上的内容
render(){
return(
<div>
<h1>hello,{this.state.name}</h1>
<button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
</div>
);
} } ReactDOM.render(
<GreetingInput/>,document.getElementById("root")
);
但箭头函数里的this指针,指向其拥有者,也就是class ,因此一个简易的方式是,在类中尽可能使用箭头函数定义函数
2、在回调函数中使用箭头函数
class GreetingInput extends React.Component{
//构造函数方法
constructor(props){
super(props);
this.state={name:"Tom"}; }
//自定义的switchName方法,用作事件处理
switchName(){
if(this.state.name==="Tom"){
this.setState({name:"Jerry"});
}else{
this.setState({name:"Tom"});
}
}
//render方法 渲染在UI上的内容 使用下边这个语法 有个问题就是每次switchName
渲染的时候都会创建一个不同的回调函数
render(){
return(
<div>
<h1>hello,{this.state.name}</h1>
<button onClick={(e) => this.switchName(e)}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
</div>
);
} } ReactDOM.render(
<GreetingInput/>,document.getElementById("root")
);
注意:当回调函数作为一个属性值传入低阶组件,上述这种方法可能会进行额外的重新渲染。
我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
React中类定义组件constructor 和super的更多相关文章
- react 的定义组件(了解)
react 中定义组件的方法 1. 定义组件 React.createClass() (被淘汰了) 定义组件中的函数 methods 的中的 this 统统指向 组件 2. 函数定义组件 定义的组件时 ...
- [React] 函数定义组件
函数定义组件的例子 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 该函数是一个有效的 Rea ...
- react组件中的constructor和super小知识
react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...
- React 中的 定义组件的 两种方式
React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...
- AntDesign(React)学习-15 组件定义、connect、interface
虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...
- class实现React继承以及constructor的super的问题
看这篇文章之前 建议先看看阮一峰 的Class继承 便于更好的理解 首先要知道一个问题 React的父子组件和组件类的继承有什么关系?答案是:没有关系 父子组件:指的得是组件标签包含关系 父子组件通过 ...
- react的constructor和super的具体含义和使用
1.constructor( )-----super( )的基本含义 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添 ...
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- React关于constructor与super(props)之间的相爱相杀
我们先把菜鸟教程的一段代码拿过来分析一下.下面这段代码是用了将生命周期方法添加到类中实现时钟效果. // 将生命周期方法添加到类中 class Clock extends React.Componen ...
随机推荐
- PHP-----TP框架基础
TP框架基础 把Thinkphp框架的压缩包解压到php文件夹下----www目录下. Thinkphp文件夹都有什么呢??? (所有用TP框架做的程序,要访问程序里面的网页.内容的话,全部要走这 ...
- MSF入侵安卓手机
MSF是Metasploit的简称,Metasploit是一款开源的安全漏洞检测工具,非常强大,分别有Windows版和Linux版,工具里集成了许多微软公布的漏洞(0day). 我这里做测试的系统是 ...
- 第21章 DMA—直接存储区访问
本章参考资料:<STM32F76xxx参考手册>DMA控制器章节. 学习本章时,配合<STM32F76xxx参考手册>DMA控制器章节一起阅读,效果会更佳,特别是涉及到寄存器说 ...
- 使用OrgChart插件生成家谱组织结构图
1.orgchart插件: github地址:https://github.com/dabeng/OrgChart 2.前端代码: //1.加载树形数据:ajax请求获取json格式的数据(flag参 ...
- Swift_方法
Swift_方法 点击查看源码 ///方法 class Methods: NSObject { func test() { // self.testInstanceMethods() //实例方法 s ...
- 02JavaScript用法
前言: 介绍一下javascript的最基础语法规范和用法. HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...
- php函数strtotime结合date时间修饰语的使用
下面简单介绍在项目开发中date时间函数和strtotime所遇到的问题,以及解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.ph ...
- python学习——常用模块
在学习常用模块时我们应该知道模块和包是什么,关于模块和包会单独写一篇随笔,下面先来了解有关在python中的几个常用模块. 一.什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文 ...
- 嘿,C语言(持续更新中...)
---恢复内容开始--- 上次简单介绍了一下C语言,这次说说数据与计算程序,那么话不多说,进来看看. 第二章 数据与简单的计算程序 一:数据 既然说到了数据,那么说说什么是写数据呢? 表面意 ...
- Excelファイルを扱う方法
概要 データをローカルに落としたいという要件がある場合.ユーザーはExcelを希望するケースが多いだろう.そんな時は以下の汎用モジュールを使用して簡単に作る事ができます.使用方法は.GUI_UPLOA ...