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. php 时间转化为刚刚、几秒前、几分前、几天前等等,友好时间提示

    / * 友好时间显示 */ function date_friend_tips($time){ if (!$time) return false; if(!is_numeric($time)){ $t ...

  2. Android多线程:深入分析 Handler机制源码(二)

    前言 在Android开发的多线程应用场景中,Handler机制十分常用 接下来,深入分析 Handler机制的源码,希望加深理解 目录 1. Handler 机制简介 定义一套 Android 消息 ...

  3. ubuntu 下 使用 Git 维护 linux kernel版本

    学习linux内核一段时间,意识到内核的版本需要严格控制.利用Git工具可以很轻松的完成不同开发人员不同模块之间的代码融合与版本控制 . 1. 首先,安装Git .可以参考廖雪峰的博客  https: ...

  4. cmake 加入调试信息

    1 首先在CMakeLists.txt中加入 SET(CMAKE_BUILD_TYPE "Debug")1在下面加入: SET(CMAKE_CXX_FLAGS_DEBUG &quo ...

  5. 喜讯!联诚发创始人龙平芳荣获2019LED行业优秀女企业家称号!联诚发横揽三项大奖!

           2019年12月20日,在深圳大梅沙京基喜来登度假酒店隆重举行“蝶变跨越”慧聪LED显示屏行业品牌盛会颁奖典礼!在来自全国各地的LED显示屏行业协会领导,企业领袖,精英代表以及来自全国各 ...

  6. python 对列表中任意两个数进行操作 (python operate any two elements in list)

    python中, 实现列表中的整型元素两两相乘或列表中的数组元素两两相与 1. 假设列表中的元素是整型, 可调用以下函数: def list_any_two_mul(mylist):      num ...

  7. Java 基础 - 单行初始化数组 Initialize array in one line

    Code: public class ClassName { private char[] value = new char[]{'a','b'}; private char[] value2 = { ...

  8. 搭建基于Linux6.3+Nginx1.2+PHP5+MySQL5.5的Web服务器全过程

    http://blog.chinaunix.net/uid-20639775-id-154497.html

  9. LUOGU P5061 秘密任务(背包+二分图染色)

    传送门 解题思路 \(orz\)出题人的神仙做法.本蒟蒻看不懂,就水个求补图再二分图染色的方法来\(%1%\)出题人. 首先我们对图中\(m\)个关系连边,发现这样是没法做的,因为我们最后要关注的是谁 ...

  10. 【Java架构:基础技术】一篇文章搞掂:Eclipse

    Eclipse中使用SVN 1.打开资源库视图 https://www.cnblogs.com/liangguangqiong/p/7965770.html 一.编辑器方面 格式化取消自动换行:打开E ...