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. 在IIS中部署Asp.net Mvc

    概述: 最近在做一个MVC 3的项目,在部署服务器时破费了一番功夫,特将过程整理下来,希望可以帮到大家! 本文主要介绍在IIS5.1.IIS6.0.IIS7.5中安装配置MVC 3的具体办法! 正文: ...

  2. Mixin模式:带实现的协议

    Mixin(织入)模式并不是GOF的<设计模式>归纳中的一种,但是在各种语言以及框架都会发现该模式(或者思想)的一些应用.简单来说,Mixin是带有全部实现或者部分实现的接口,其主要作用是 ...

  3. 深入简出的nginx

    深入简出的nginx hosts的简单介绍 nginx的简单介绍 hosts介绍 谈到nginx我们不得不说hosts hosts的存放在C:\Windows\System32\drivers\etc ...

  4. Angular开发者指南(一)入门介绍

    什么是Angular AngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程序的组件.AngularJS的数据绑定和依 ...

  5. 关于redis 缓存的问题

    项目是 星期三上线的 , 今天来的时候有个问题,  我觉得很有价值,所以就记录了一下. 问题描述:  我们是做app 开发 的, 这次开发是要 把 以前的app 的业务 分开,新建一 个app ,这个 ...

  6. (九)javaScript的基本使用

    <script type="text/javascript"> var userName; var userAge; function interInfo(){ use ...

  7. Min Stack leetcode

    Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...

  8. 1623: [Usaco2008 Open]Cow Cars 奶牛飞车

    1623: [Usaco2008 Open]Cow Cars 奶牛飞车 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 291  Solved: 201[S ...

  9. 关于html中利用jQuery选择子节点方法总结——待续

    好几次碰到类似的要求,每次用的都不一样,在之前的面试的时候就被问到,突然觉得虽然自己做过但是说不出头绪,只能回答什么parent(),next()等等.所以想整理一下. 1.需求一:同页面有两个表格, ...

  10. C#编写代码:求三个数中的最大数

    static void Main(string[] args)        {            float x, y, z, temp;            Console.Write(&q ...