1,ES6语法

使用class声明一个类,且要继承react组件的方法和属性的时候 :

在里面我们可以直接指定 this.state = { }, 我们可以当前组件内任何地方使用 this.setState()来改变组件状态;

注意: 将类的方法绑定到当前对象,避免在方法内部this指针被覆盖

class PCHeader extends React.Component {
constructor() {
super();
this.state = {
userNickName: '用户',
userId: 0
};
  this.handleClick = this. handleClick.bind(this);
 }
}

2,Es5 语法

如果使用createClass方法创建一个Component组件,可以自动调用它的getInitialState方法来获取初始化的State对象,但是在ES6的Class中并不会如此自动调用,因此,要稍作修改。

var PCHeader = React.creatClass ({

  getInitialState() {
return {
userNickName: '用户',
userId: 0
};
 }
})

react中,constructor和getInitialState的区别的更多相关文章

  1. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  2. react中constructor()和super()的具体含义以及如何使用

    1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...

  3. React中useLayoutEffect和useEffect的区别

    重点: 1.二者函数签名相同,调用方式是一致的 2. 怎么简单进行选择: 无脑选择useEffect,除非运行效果和你预期的不一致再试试useLayoutEffect 区别详解:useEffect是异 ...

  4. React中useMemo与useCallback的区别

    useMemo 把"创建"函数和依赖项数组作为参数传⼊入useMemo,它仅会在某个依赖项改变时才重新计算memoized 值.这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计 ...

  5. React中state和props的区别

    props和state都是用于描述component状态的,并且这个状态应该是与显示相关的. State 如果component的某些状态需要被改变,并且会影响到component的render,那么 ...

  6. Immutable学习及 React 中的实践

    为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原 ...

  7. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  8. React.createClass和extends Component的区别

    React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...

  9. [ES6]react中使用es6语法

    前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...

随机推荐

  1. php弱类型语言中的类型判断

    1.php一个数字和一个字符串进行比较或者进行运算时,PHP会把字符串转换成数字再进行比较.PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0. 例如:123abc转换后 ...

  2. 【疑问】css

    1.p{float:left}好像意思是p后面的元素往左浮动的意思啊!!2.ff下,button的文字好像没法垂直居中2.1 button垂直对齐,其line-height似乎需要减2px(依边框宽度 ...

  3. Kafka Eagle 源码解读

    1.概述 在<Kafka 消息监控 - Kafka Eagle>一文中,简单的介绍了 Kafka Eagle这款监控工具的作用,截图预览,以及使用详情.今天笔者通过其源码来解读实现细节.目 ...

  4. Spring框架(4)---AOP讲解铺垫

    AOP讲解铺垫      不得不说,刚开始去理解这个Aop是有点难理解的,主要还是新的概念比较多,对于初学者一下子不一定马上能够快速吸收,所以我先对什么事Aop做一个解释: 首先说明:本文不是自己所写 ...

  5. Gradle之恋-任务1

    任务作为Gradle的核心功能模块,而且Gradle的任务还可以具有自己的属性和方法,大大扩展了Ant任务的功能.由于任务相关内容比较多,分为两篇来探讨,本篇主要涉及到:任务的定义.任务的属性.任务的 ...

  6. 通过udev创建ASM共享磁盘(RAC)

    OS:RedHat EL6.0 Oracle:   Oracle 11gR2 在Oracle 11gR2,构建RAC时可以通过ASM创建asm disk,但是需要安装asmlib相关软件:对于RedH ...

  7. .NET获取客户端的操作系统、IP地址、浏览器版本

    获取客户端的操作系统: #region 获取操作系统版本号 /// <summary> /// 获取操作系统版本号 /// </summary> /// <returns ...

  8. 1774: [Usaco2009 Dec]Toll 过路费

    1774: [Usaco2009 Dec]Toll 过路费 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 263  Solved: 154[Submit ...

  9. 1712: [Usaco2007 China]Summing Sums 加密

    1712: [Usaco2007 China]Summing Sums 加密 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 338  Solved: 12 ...

  10. Codevs2776 寻找代表元

    2776 寻找代表元 时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold    题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用1到n编号 ...