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. idea的spring配置

    开始使用idea,开始的时候把相关的插件都禁用了,导致在建项目和configuration的时候不出现spring相关字样 到plugins中找到installed的插件,查看spring boot ...

  2. struct解决socket黏包问题 (指令传输)

    服务端代码如下 import struct import subprocess import socket server = socket.socket() server.bind(()) serve ...

  3. 前端,用js根据一个对象,去除另个对象中重复的元素

    这里的应用场景是,两个div盛放待选项目和已选项目,如下图 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> < ...

  4. icomoon字体图标引用代码

    1.第一步在样式里声明字体:告诉别人我们自己定义的字体. @font-face{ /*声明字体 引用字体*/ font-family:'icomoon'; src:url('fonts/icomoon ...

  5. python输入问题

    1.关于python的输入问题: 在2.x版本单行单输入input,单行多输入raw_input 在3.x版本中就已经没有raw_input,只有input,单行单输入多输入都可以. 类似2 3 4的 ...

  6. oscache缓存

    oscache 使用总结 Posted on 2009-05-22 22:45 青果 阅读(1270) 评论(2)  编辑  收藏 所属分类: 技术点滴  前阵子对公司网站进行了性能优化,其中,有一项 ...

  7. 用CleanMyMacX怎样进行邮件附件清理,CleanMyMacX清理邮件附件的方法

    都晓得CleanMyMacX邮件附件清理功能十分强大,用CleanMyMacX怎样进行邮件附件清理,CleanMyMacX清理邮件附件的方法带给你,邮件附件清理功能可以保证在收件箱中原始附件的安全性的 ...

  8. react-router v3和v4区别

    1.默认路由 v3 <IndexRoute> v4 <Route exact> 2.授权路由 import Redirect from 'react-router-dom' & ...

  9. js过滤字符串中的html标签

    var str = 'add<a>daad</a><p>fsdada</p>' str.replace(/<[^<>]+>/g, ...

  10. 在Windows Server2016中安装SQL Server2016(转)

    在Windows Server2016中安装SQL Server2016(转) 转自: http://blog.csdn.net/yenange/article/details/52980135 参考 ...