刚开始学习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的构造函数中,需要将事件函数绑定到本类的实例

但箭头函数里的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的更多相关文章

  1. react 的定义组件(了解)

    react 中定义组件的方法 1. 定义组件 React.createClass() (被淘汰了) 定义组件中的函数 methods 的中的 this 统统指向 组件 2. 函数定义组件 定义的组件时 ...

  2. [React] 函数定义组件

    函数定义组件的例子 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 该函数是一个有效的 Rea ...

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

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

  4. React 中的 定义组件的 两种方式

    React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...

  5. AntDesign(React)学习-15 组件定义、connect、interface

    虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...

  6. class实现React继承以及constructor的super的问题

    看这篇文章之前 建议先看看阮一峰 的Class继承 便于更好的理解 首先要知道一个问题 React的父子组件和组件类的继承有什么关系?答案是:没有关系 父子组件:指的得是组件标签包含关系 父子组件通过 ...

  7. react的constructor和super的具体含义和使用

    1.constructor( )-----super( )的基本含义 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添 ...

  8. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  9. React关于constructor与super(props)之间的相爱相杀

    我们先把菜鸟教程的一段代码拿过来分析一下.下面这段代码是用了将生命周期方法添加到类中实现时钟效果. // 将生命周期方法添加到类中 class Clock extends React.Componen ...

随机推荐

  1. springboot之静态资源路径配置

    静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取. 在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classp ...

  2. JavaScript在浏览器中把文本保存为文件的方法

    JavaScript在浏览器中把文本保存为文件的方法 经过测试第二种方法可以保存更多的文本不至于卡死 var saveTextAsFile1 = function (text, fileName, s ...

  3. 二十二、详述 IntelliJ IDEA 中恢复代码的方法

    在咱们正常开发项目的时候,难免遇到在开发过程中由于某种原因,想要将代码恢复到前一版本的情景.特别是在咱们删除了某些代码,想要恢复之前删除的代码的时候,了解这个在 IntelliJ IDEA 中恢复代码 ...

  4. Linq 表达

    Lambda 简单了解 //Lambda //匿名方法 //delegate (Student s) { return s.Age > 12 && s.Age < 20; ...

  5. NLP语言模型

    语言模型: I. 基本思想 区别于其他大多数检索模型从查询到文档(即给定用户查询,如何找出相关的文档), 语言模型由文档到查询,即为每个文档建立不同的语言模型,判断由文档生成用户查 询的可能性有多大, ...

  6. iOS 杂笔-26(苹果禁用热更新)

    iOS 杂笔-26(苹果禁用热更新) 苹果爸爸禁用热更新小伙伴们有什么想说的吗? 苹果爸爸禁用热更新小伙伴们有什么想说的吗? 苹果爸爸禁用热更新小伙伴们有什么想说的吗?

  7. Redis服务端和客户端的命令

    服务器端 服务器端的命令为redis-server 可以使⽤help查看帮助⽂档 redis-server --help 个人习惯 ps aux | grep redis 查看redis服务器进程su ...

  8. ps命令 百度+加自己的理解

    ps故为process status的缩写,即为进程状态的命令, ps命令详解, 1)ps a 显示现行终端机下的所有程序,包括其他用户的程序.2)ps -A 显示所有程序.3)ps c 列出程序时, ...

  9. 一台ECS服务器,部署多(两)应用,且应用配置不同域名

    场景 产品环境服务器有两台,前后端各分配一台服务器.现在在不增加机器的情况下,需要增加部署一套服务给台北地区服务. 现有的前端部署方案. 产品环境部署方案详解 实现 配置NAT步骤 ECS配置多网卡, ...

  10. php源码建博客2--实现单入口MVC结构

    主要: MVC目录结构 数据库工具类制作 创建公共模型类和公共控制器类 --------------文件结构:-------------------------------------- blog├─ ...