constructor 函数时组件最先执行的函数

class childen extends react.Component{
constructor(props){
super(props);
this.state={
attr1:"",
}
}
}

一般在constructor函数中都会存在 上述方法,个人对其的理解

constructor():子类继承父类时的构造方法,主要时用以定义this.属性 在react中一些默认的数据可以直接在此处定义

import React from 'react';

class Mine extends React.Component {
constructor(a) {
super(a);
this.state = {
date: new Date().getTime()
}
//定义custom 和state并没有什么本质的区别,在都可以通过this都访问,但是推荐使用state 因为在react中 即使我们不定义this.state
//this下仍会有一个默认的state属性,具体作用暂时没有发现,感兴趣的同学可以深入了解一下
this.custom = {
date: new Date().getTime()
}
console.log(a);
} componentWillMount() {
console.log("在渲染前调用",this)
} render() {
return (
<div>
<div className='head'>
<span>{this.state.date}</span>
                   <span>{this.custom.date}</span>
                </div>
</div>
)
}
}

spuer(): 注意在定义组件的时候可以没用constructor方法,一旦定义,就必须使用spuer方法,这不是react规定的而是es6要求,具体原因如下

react 组件的构造函数的更多相关文章

  1. React——组件的生命周期函数

    每一个组件都有一些生命周期函数. 当组件实例被创建并且会插入到DOM中,下面这些函数会被调用 constructor componentWillMount render componentDidMou ...

  2. 【译】参考手册-React组件

    react version: 15.4.2 React.Component 组件能够让你将UI拆分为多个独立自治并可重用的部分.在 React 中提供了 React.Component. 概述 Rea ...

  3. 第二章 设计高质量的React组件

    第二章 设计高质量的React组件 高质量React组件的原则和方法: 划分组件边界的原则: React组件的数据种类: React组件的生命周期. 2.1 易于维护组件的设计要素 1.高内聚:指的是 ...

  4. 总结 React 组件的三种写法 及最佳实践 [涨经验]

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...

  5. React组件设计

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  6. React组件绑定this的三种方法

    我们在使用React组件时,调用方法常常用到this和event对象,默认情况是不会绑定到组件上的,需要特殊处理. 节点上使用bind绑定 特点:该方法会在每次渲染组件时都会重新绑定一次,消耗一定的性 ...

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

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

  8. react复习总结(1)--react组件开发基础

    这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...

  9. 2. React组件的生命周期

    2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...

随机推荐

  1. 从URL输入到页面展现,过程中发生了什么?

    从在地址栏中输入了URL,到浏览器展现出页面整个过程中,大概经历了如下过程: 在浏览器地址中输入了URL并回车 域名解析 服务器处理请求 浏览器处理 网页的绘制 一.在浏览器地址中输入URL 首先解释 ...

  2. OpenCV学习笔记 笔记汇总

    转载来源:https://www.cnblogs.com/tonyc/p/6407318.html 今后开始学习OpenCV   1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址:http ...

  3. NDK笔记(二)-在Android Studio中使用ndk-build(转)

    前面一篇我们接触了CMake,这一篇写写关于ndk-build的使用过程.刚刚用到,想到哪儿写哪儿. 环境背景 Android开发IDE版本:AndroidStudio 2.2以上版本(目前已经升级到 ...

  4. poj 3744 矩阵快速幂+概率dp

    题目大意: 输入n,代表一位童子兵要穿过一条路,路上有些地方放着n个地雷(1<=n<=10).再输入p,代表这位童子兵非常好玩,走路一蹦一跳的.每次他在 i 位置有 p 的概率走一步到 i ...

  5. 前端跨域之jsonp

    demo1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. Debug - SpringBoot - Error starting ApplicationContext. To display the auto-configuration report re-runyour application

    Error log 2019-12-07 22:33:03.959 ERROR 3760 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter : ** ...

  7. Delphi 堆栈 [ heap(堆) 和 stack(栈) ]

    程序需要的内存空间分为 heap(堆) 和 stack(栈); heap(堆) 是自由存储区, stack(栈) 是自动存储区; 使用 heap 需要手动申请.手动释放, 使用 stack 是自动申请 ...

  8. 构造——cf1202d

    和以前有一题构造01串的很像,固定住一个7,求出3的个数,对1的位置进行贪心 /* 1337 1 13337 3 133337 6 1333337 10 */ #include<bits/std ...

  9. 误将SELINUXTYPE看成SELINUX后,将其值改为disabled。导致操作系统服务启动,无法进入单用户模式

    环境:Redhat 6.4 ORACLE11g RAC 在安装ORACLE11g之前需要关闭操作系统的防火墙和SELinux. 1.关闭防火墙:iptables -F————————————清除防火墙 ...

  10. linux中CentOS、Ubuntu、Debian三个版本系统 差别

    Linux有非常多的发行版本,从性质上划分,大体分为由商业公司维护的商业版本与由开源社区维护的免费发行版本. 商业版本以Redhat为代表,开源社区版本则以debian为代表.这些版本各有不同的特点, ...