react中,constructor和getInitialState的区别
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的区别的更多相关文章
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- react中constructor()和super()的具体含义以及如何使用
1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...
- React中useLayoutEffect和useEffect的区别
重点: 1.二者函数签名相同,调用方式是一致的 2. 怎么简单进行选择: 无脑选择useEffect,除非运行效果和你预期的不一致再试试useLayoutEffect 区别详解:useEffect是异 ...
- React中useMemo与useCallback的区别
useMemo 把"创建"函数和依赖项数组作为参数传⼊入useMemo,它仅会在某个依赖项改变时才重新计算memoized 值.这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计 ...
- React中state和props的区别
props和state都是用于描述component状态的,并且这个状态应该是与显示相关的. State 如果component的某些状态需要被改变,并且会影响到component的render,那么 ...
- Immutable学习及 React 中的实践
为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原 ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- React.createClass和extends Component的区别
React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...
- [ES6]react中使用es6语法
前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...
随机推荐
- php弱类型语言中的类型判断
1.php一个数字和一个字符串进行比较或者进行运算时,PHP会把字符串转换成数字再进行比较.PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0. 例如:123abc转换后 ...
- 【疑问】css
1.p{float:left}好像意思是p后面的元素往左浮动的意思啊!!2.ff下,button的文字好像没法垂直居中2.1 button垂直对齐,其line-height似乎需要减2px(依边框宽度 ...
- Kafka Eagle 源码解读
1.概述 在<Kafka 消息监控 - Kafka Eagle>一文中,简单的介绍了 Kafka Eagle这款监控工具的作用,截图预览,以及使用详情.今天笔者通过其源码来解读实现细节.目 ...
- Spring框架(4)---AOP讲解铺垫
AOP讲解铺垫 不得不说,刚开始去理解这个Aop是有点难理解的,主要还是新的概念比较多,对于初学者一下子不一定马上能够快速吸收,所以我先对什么事Aop做一个解释: 首先说明:本文不是自己所写 ...
- Gradle之恋-任务1
任务作为Gradle的核心功能模块,而且Gradle的任务还可以具有自己的属性和方法,大大扩展了Ant任务的功能.由于任务相关内容比较多,分为两篇来探讨,本篇主要涉及到:任务的定义.任务的属性.任务的 ...
- 通过udev创建ASM共享磁盘(RAC)
OS:RedHat EL6.0 Oracle: Oracle 11gR2 在Oracle 11gR2,构建RAC时可以通过ASM创建asm disk,但是需要安装asmlib相关软件:对于RedH ...
- .NET获取客户端的操作系统、IP地址、浏览器版本
获取客户端的操作系统: #region 获取操作系统版本号 /// <summary> /// 获取操作系统版本号 /// </summary> /// <returns ...
- 1774: [Usaco2009 Dec]Toll 过路费
1774: [Usaco2009 Dec]Toll 过路费 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 263 Solved: 154[Submit ...
- 1712: [Usaco2007 China]Summing Sums 加密
1712: [Usaco2007 China]Summing Sums 加密 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 338 Solved: 12 ...
- Codevs2776 寻找代表元
2776 寻找代表元 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用1到n编号 ...