constructor(props) {
super(props);
this.state = {
orderNo: "001",
wid: 6
};
}

constructor:

在ES6的语法中,constructor方法是类的默认方法

通过new命令生成对象实例时,自动调用该方法

一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

super():

子类没有自己的this对象,必须调用父类的this对象

super()用于子类在constructor()中调用,继承父类的this对象

super与super(props):

super()super(props)的区别就是你是否需要在构造函数内使用this.props

如果需要,则必须要写props

如果不需要,写不写效果是一样的

this.state={}:

state的初始化

props的初始化:

 static defaultProps = {
onClick : null,
className : '',
text : '默认'
};

State与Props

State主要用于更新界面,组件的State属性在生命周期函数 getInitialState中初始化,当调用组件的this.setState改变state的时候,组件会重新渲染刷新。 
Props主要用于组件之间传递数据,也就是标签的属性 这里的pname属性就可以在MyText中通过this.props.pname得到

React学习(1)——constructor的更多相关文章

  1. vue 和 react 学习 异同点

    vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...

  2. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  3. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  4. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  5. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  6. React 学习笔记(1) 基础语法和生命周期

    参看:视频地址 简单搭建一个react-cli: 2. React.createElement() 将object转化为 React语法 import React from 'react' impor ...

  7. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  8. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  9. React学习资料

    以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...

  10. React学习笔记(一) 基础知识

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...

随机推荐

  1. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  2. 【u118】日志分析

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] M 海运公司最近要对旗下仓库的货物进出情况进行统计.目前他们所拥有的唯一记录就是一个记录集装箱进出情况 ...

  3. Asp 使用 Microsoft.XMLHTTP 抓取网页内容无乱码处理,并过滤须要的内容

    Asp 使用 Microsoft.XMLHTTP 抓取网页内容.并过滤须要的内容 Asp 使用 Microsoft.XMLHTTP 抓取网页内容无乱码处理,并过滤须要的内容 演示样例源代码: < ...

  4. Java 并发工具包 java.util.concurrent 大全

    1. java.util.concurrent - Java 并发工具包 Java 5 添加了一个新的包到 Java 平台,java.util.concurrent 包.这个包包含有一系列能够让 Ja ...

  5. 驱动程序调试方法之printk——自制proc文件(二)

    上一节的程序很振奋人心,我们自己实现了一个myprintk打印函数.但是这个函数存在一个致命的缺陷,那就是只能使用一次cat /proc/mymsg命令来读取mylog_buf的值.这是因为读到最后会 ...

  6. html5-7 html5语义标签和视频

    html5-7  html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...

  7. Nginx+uswgi+Django部署

    详情参考: http://blog.csdn.net/a_little_snail/article/details/78045636

  8. Android studio在Refresh gradle project卡死,附解决办法

    首先打开android studio项目 找到项目目录gradle\wrapper\gradle-wrapper.properties这个文件 你会看到 #Wed Apr 10 15:27:10 PD ...

  9. 百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

    个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配 ...

  10. 辛星浅析yaf框架中的类的自己主动载入问题

    因为公司非常多项目都是基于yaf的,而非常多刚接触yaf的朋友问的第一个问题就是:yaf的自己主动载入是依照什么规则来的. 鉴于此.于是我特别开了一篇博文来记录一下. 首先在yaf中.models文件 ...