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. android中读取SD卡上的数据

    通过Context的openFileInput或者openFileOutput打开的文件输入输出流是操作应用程序的数据文件夹里的文件,这样存储的大小比较有限,为了更好的存取应用程序的大文件数据,应用程 ...

  2. ARM 汇编与C之间 的调用

    一. 汇编调用 C 1. 初始化栈 2. 初始化BSS段 (BSS 段是C语言存放未初始化的全局变量,或者初始化为0 的全局变量) 3 .使用 r0 ,r1, r2, r3 给函数传参,如果多于  4 ...

  3. 杭电多校第四场-H- K-th Closest Distance

    题目描述 You have an array: a1, a2, , an and you must answer for some queries.For each query, you are g ...

  4. koa 中间件 koa-art-template 的使用

    例子 const Koa = require('koa'); const render =require('koa-art-template'); const path= require('path' ...

  5. centos 单用户登陆模式操作

    在centos中因为安装java而配置 jdk环境变量的原因,对/etc/profile文件进行了编辑 错误的环境变量配置导致在第一次修改profile文件并保存后,执行source /etc/pro ...

  6. Spring 整合 Redis(转)

    转自http://blog.csdn.net/java2000_wl/article/details/8543203 pom构建: <modelVersion>4.0.0</mode ...

  7. Linux之-命令

    安装xshell http://jingyan.baidu.com/article/1612d500af1c97e20e1eee25.html 1.帮助命令 man:获得某个命令的说明和使用方式的详细 ...

  8. docker仓库管理(9)

    使用公共 Registry Docker Hub 是 Docker 公司维护的公共 Registry.用户可以将自己的镜像保存到 Docker Hub 免费的 repository 中.如果不希望别人 ...

  9. python 生成json格式文件,并存储到手机上

    上代码 #!/usr/bin/env python # -*- encoding: utf-8 -*- import json import os import random "" ...

  10. shell 生成多级目录遇到最后一级目录乱码 mkdir -p a/b/c/d

    使用shell完成从配置文件中获取路径(字符匹配),在生成多级路径的过程过遇到最后一级目录乱码. 代码如下: mkdir -p $path 这个$path是从配置文件中读取. 如何解决: 1.检查是否 ...