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. list采坑记录一下

    List<Integer> cards = Lists.newArrayList(6,10,11,12,21,23,29,30,38,39,42,43,46,51,53,59,60);Li ...

  2. 安装 sysbench的 报错 /usr/bin/ld: cannot find -lmysqlclient_r 解决办法

    首先你需要找到这个库的位置 一般找的话需要将lib 给加上(注意:我这里是 -lmysqlclient_r 的报错,于是我找就找 libmysqlclient_r ) find / -name lib ...

  3. MySQL--分组数据

    1.数据分组 #连接数据库 use newschema; #查看表中数据 select *from products: #返回供应商1003提供的产品数目 ; 2.创建分组 select vend_i ...

  4. 2019南昌邀请赛预选赛 I. Max answer (前缀和+单调栈)

    题目:https://nanti.jisuanke.com/t/38228 这题题解参考网上大佬的. 程序的L[i],R[i]代表a[i]这个点的值在区间 [L[i],R[i]] 中最小的并且能拓展到 ...

  5. hbuilder 配置app为沉浸式状态栏

  6. 【专业的 Markdown 编辑写作软件】MWeb for Mac基本使用教程

    MWeb for Mac是一款专业的 Markdown 编辑写作软件,可以生成MarkDown编辑器和静态博客,在记日记的时候,你可以使用插入图片的功能,使用MWeb软件你可以拖拽或直接粘贴即可插入图 ...

  7. leetcood学习笔记-28-KMP*

    题目: 第一次提交: class Solution: def strStr(self, haystack: str, needle: str) -> int: if not len(needle ...

  8. 数组对象用map修改键名

    用vue组件需要使用的数据格式和后台返回的不一样 console.log(res); this.optionsEp = res.map(item => { return { value: ite ...

  9. 赋能时空云计算,阿里云数据库时空引擎Ganos上线

    随着移动互联网.位置感知技术.对地观测技术的快速发展,时空信息已从传统GIS行业渗透到大众应用及各行各业.从静态POI(兴趣点)到APP位置信息,从导航电子地图到车辆行驶轨迹,从卫星影像到三维城市建模 ...

  10. YUM仓库的搭建方式

    搭建YUM仓库 通俗的讲,实际上就是创建一个链接,将一堆可用于Linux系统安装的数据包用一种链接的方式给Linux系统读取,方法步骤如下: 一.找到可用的yum软件包的位置 二.创建挂载点提供访问y ...