getDefaultProps 不是获取默认props,而是设置默认props,主要用在ES5的React写法中
getInitialState 不是获取默认State,而是设置初始的state,主要是用在ES5的React写法中

下面是ES5和ES6的写法对比

//ES5写法
var Video = React.createClass({
getDefaultProps: function(){
return {
autoPlay: false,
maxLoops: 10
}
},
getInitialState: function(){
return {
loopsRemaining: this.props.maxLoops
}
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired
}
}) //ES6写法
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10
}
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired
}
//构造函数写法
constructor(props){
this.state = {
...
}
}
//非构造函数写法
state = {
loopsRemaining: this.props.maxLoops
}
} //组件外部写法
Video.defaultProps = {
autoPlay: false,
maxLoops: 10
}

React的getDefaultProps和getInitialState的更多相关文章

  1. ReactJS入门(二)—— 组件的生命周期

    如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...

  2. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  3. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  4. React学习笔记。

    有段时间没写博客了,最近这段时间有点说不出的苦,虽然说年轻的时候该多出去经历些事,但每次找工作东跑西跑,坐公交坐地铁浪费了我太多时间,我感觉到这是一种浪费,对生命的浪费.所以很想尽快找到一份工作,去努 ...

  5. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  6. 前端React开发入门笔记

    什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...

  7. React学习笔记-5-初始化阶段介绍

    初始化阶段可以使用的函数:getDefaultProps:只调用一次,实例之间共享引用.只有在组件的第一个实例被初始化的时候,才会调用他,然后react会把这个函数的返回结果保存起来,从第二个实例开始 ...

  8. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  9. React,React Native中的es5和es6写法对照

    es6用在React中的写法总结: 在es6还没有完全支持到浏览器的阶段里,已经有很多技术人员开始用es6的写法来超前编程了,因为有转义es6语法的工具帮助下,大家才可大量使用.解析看看es6写法用在 ...

随机推荐

  1. WEB网站测试心得整理

    一.输入框: 1.正常的字母/文字/数字(正常流程的测试): 2.重复提交(输入内容后,重复点击提交按钮): 3.纯异常字符/正常输入夹杂异常字符(!@#¥%……&**等等): 4.长度限制( ...

  2. 接口测试工具postman(五)批量执行测试用例

    1.准备好测试用例及相关数据 2.点击Run按钮 3.选择运行collection或者folder 4.运行完成

  3. .NET邮件发送详情

    ①百度下载个Free Smtp Server ②下载完成后,打开进去,点击左上角的options,弹出窗口,进行如下图选项即可(一般默认已正确选中),然后我们可以把这软件关了. (下次你重启电脑时,也 ...

  4. Linux命令应用大词典-第26章 模块和内核管理

    26.1 lsmod:显示内核中模块的状态 26.2 get_module:查看内核模块详细信息 26.3 modinfo:显示内核模块信息

  5. python数据分析基础——pandas Tutorial

    参考pandas官方文档: http://pandas.pydata.org/pandas-docs/stable/10min.html#min 1.pandas中的数据类型 Series 带有索引标 ...

  6. docker学习2

    今天继续学习docker! 搜索镜像 docker search centos 下载镜像 docker pull name(镜像名字) 查看镜像docker images 字段含义分析: TAG:仓库 ...

  7. 深度学习图像分割——U-net网络

    写在前面: 一直没有整理的习惯,导致很多东西会有所遗忘,遗漏.借着这个机会,养成一个习惯. 对现有东西做一个整理.记录,对新事物去探索.分享. 因此博客主要内容为我做过的,所学的整理记录以及新的算法. ...

  8. 隐马尔科夫模型(hidden Markov Model)

    万事开头难啊,刚开头确实不知道该怎么写才能比较有水平,这篇博客可能会比较长,隐马尔科夫模型将会从以下几个方面进行叙述:1 隐马尔科夫模型的概率计算法  2 隐马尔科夫模型的学习算法 3 隐马尔科夫模型 ...

  9. Some good articles

    https://alligator.io/vuejs/introduction-render-functions/ https://alligator.io/vuejs/vue-jwt-pattern ...

  10. 什么是Frozen Binary

    对于Python来说,你可以将Python的字节码,PVM(也就是解析器),以及需要的相关类库,打包成一个package,这个package实际上是一个二进制可执行文件,这样,用户获取到这个packa ...