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. 每天一个Linux命令(01)--ls命令

    ls命令是Linux下最常用的命令.ls命令就是list的缩写,缺省下ls用来打印当前目录的清单,如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单.通过ls命令不仅可以查看Linux文件 ...

  2. 卷积神经网络(CNN)反向传播算法

    在卷积神经网络(CNN)前向传播算法中,我们对CNN的前向传播算法做了总结,基于CNN前向传播算法的基础,我们下面就对CNN的反向传播算法做一个总结.在阅读本文前,建议先研究DNN的反向传播算法:深度 ...

  3. 两款【linux字符界面下】显示【菜单】,【选项】的powershell脚本模块介绍

    两款[linux字符界面下]显示[菜单],[选项]的powershell脚本模块介绍 powershell linux  ps1 menu choice Multiselect 传教士 菜单 powe ...

  4. SpringMvc的运行流程

    一.先用文字描述 1.用户发送请求到DispatchServlet 2.DispatchServlet根据请求路径查询具体的Handler 3.HandlerMapping返回一个HandlerExc ...

  5. javascript string对象方法总结

    1.anchor() 用于创建html锚,也就是a标签,()中可以带参数,是a标签的name属性值. var string="hello world"; document.writ ...

  6. Python 正则表达式(字符)详解

    Python正则表达式 - 简介 ​    其实正则表达式这种技术,源于一个很简单的问题:  如何通过变成使得计算机具有在文本中检索某种模式的能力? ​     而正则表达式为通过编程实现高级的文本模 ...

  7. Effective c++ Item 28 不要返回对象内部数据(internals)的句柄(handles)

    假设你正在操作一个Rectangle类.每个矩形可以通过左上角的点和右下角的点来表示.为了保证一个Rectangle对象尽可能小,你可能决定不把定义矩形范围的点存储在Rectangle类中,而是把它放 ...

  8. sqlserver的一些小知识点

    1.高效分页sql和储存过程 select top 每页条数 * from ( select ROW_NUMBER() over (order by id)as nid ,* from table01 ...

  9. 非服务器的定期校正时间 Anacron

    与服务器不同,编程和办公用计算机不是连续24小时运行的.开关机的时间不固定,类似较时这样的任务无法保证运行. 对于这类机器,可以考虑使用 Anacron 进行设置. 在 Archlinux 中, An ...

  10. scanf函数之扫描集

    前言 %[]是scanf函数不常用到的格式字符--扫描集(scanset),它的用法很简单,但却能巧妙地解决一些输入问题.(由于书籍里和网上对此格式字符的介绍很少且篇幅较小,本文可能会有些许错误,请读 ...